Question

对不起，我之前从未接触过jquery，所以我不知道自己在做什么。

我试图在我的html页面中添加一些jquery代码，我无法真正粘贴整个页面，但是从本质上讲，我的代码块包含在以下部分：

  <script defer src="script.js"></script>
  <script>
    $('a').hover(function() {
        $(this).css('color', 'green');
    }, function() {
        $(this).css('color', 'black');
        }
    );
    window.onload=function(){
    }
  </script>

但是，我页面上的链接不能反映我在此处写的悬停效果更改

我怎么可能做错了？请让我知道是否已发布整个页面以便进行各种故障排除...

编辑：好的，我已经做了一个测试页，上面没有太多内容，但是jquery命令在这里仍然不起作用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <script src="http://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <title>Test Page</title>
    <script>
    $('a').hover(function() {
        $(this).css('color', 'green');
    }, function() {
        $(this).css('color', 'black');
        }
    );
    </script>
</head>
<body>
    <h1 id="headingOne">Header 1</h1>

    <a href="google.com">Link 1</a>
    <a href="google.com">Link 2</a>
    <a href="google.com">Link 3</a>
</body>
</html>

PS：我知道没有必要为此使用javascript / jquery，但这是用于学校作业，它说正在为此任务使用jquery ...

Answer 1

如果要使用jQuery而不是CSS，这是应该使用的方法：

<script src="http://code.jquery.com/jquery-3.3.1.js"></script>

<a href="#">Hover on me!</a>

dev

Answer 2

我已经为您提供了一个可行的基本示例，希望对您有所帮助。

$(document).ready(function()
{
    // Register hover listener on anchor tags.

    $('a').hover(function()
    {
        $(this).css('color', 'green');
    }, function()
    {
        $(this).css('color', 'black');
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a>JUST A LINK</a>

Answer 3

对于这样一个简单的问题，您不需要Javascript。您可以只使用:hover CSS伪类。

.myClass{
  color: black;
}
.myClass:hover{
  color: green;
}

<a class="myClass">This is a link</a>

如果必须使用jQuery，则可以使用.hover()函数，其中第一个参数是在悬停时执行的函数，第二个参数是当元素不再悬停时执行的函数。

$(function(){
  $('.myClass').hover(function(){
  $(this).css('color', 'green');
  }, function(){
  $(this).css('color', '');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="myClass">This is a link</a>

您的示例不起作用，因为您尝试在DOM准备就绪之前对其进行访问。您应该在$(document).ready(function(){})或等效的$(function(){})中添加事件侦听器。您的代码（http://jsfiddle.net/oe6m38xj/）的工作示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <script src="http://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <title>Test Page</title>
    <script>
    $(function(){
        $('a').hover(function() {
        $(this).css('color', 'green');
    }, function() {
        $(this).css('color', 'black');
        }
    );
    })
    </script>
</head>
<body>
    <h1 id="headingOne">Header 1</h1>

    <a href="google.com">Link 1</a>
    <a href="google.com">Link 2</a>
    <a href="google.com">Link 3</a>
</body>
</html>

如果要侦听动态创建的a元素上的所有悬停事件，则可以侦听与“ a”匹配的文档（即锚元素）上的悬停事件。

   <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
        <script src="http://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
        <title>Test Page</title>
        <script>
        $(document).on('mouseenter', 'a', function() {
            $(this).css('color', 'green');
        }).on('mouseout', 'a', function() {
            $(this).css('color', 'black');
        });
        </script>
    </head>
    <body>
        <h1 id="headingOne">Header 1</h1>

        <a href="google.com">Link 1</a>
        <a href="google.com">Link 2</a>
        <a href="google.com">Link 3</a>
    </body>
    </html>

Answer 4

$(".selector").on({
    mouseenter: function () {
         $(this).css("color", "red");
    },
    mouseleave: function () {
         $(this).css("color", "");
    }
});

<script src="http://code.jquery.com/jquery-3.3.1.js"></script>

<a class="selector" href="#">Hover on me!</a>

Answer 5

$('a')运算符会找到DOM中的所有锚元素，并将其后的内容应用于它们。因为您的代码在HTML文档的开头同步运行，所以在代码运行时DOM中没有锚元素。为了将悬浮代码应用于页面中的锚元素，您必须等到锚元素创建之后。您可以通过将代码放入$(document).ready(function() { /*put your code here*/ })中来完成此操作，该代码将等待执行代码，直到将所有DOM元素都添加到DOM中为止。

该站点的沙箱无需启用“运行代码段”功能，从而掩盖了此类初始化问题，因为它需要做所有工作才能使代码段在现有页面中安全运行。

在此示例中，使用CSS hover伪类会更好，因为它不会出现此问题（即使稍后添加它们也会影响页面上的所有锚元素），但您仍然希望如果您要触发的动作不是CSS可以处理的，则使用jQuery（例如，如果您想暂停播放视频以响应悬停）。

Answer 6

我可以在HTML页面内添加jQuery吗？

您可以在页面中添加jQuery代码。但是在底部添加（恰好在</html>关闭标记之前）会很好。

查看此内容：-Should Jquery code go in header or footer?

为什么点击功能不起作用？

您必须在<ready>函数内部添加click，由于DOM的某些原因，您将不得不考虑click事件的另一种处理方式。看到这个

我可以在HTML页面内添加jQuery吗？

Why is this jQuery click function not working?

如何在jquery中添加悬停链接效果？

6 个答案: