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

【问题标题】：how to add hover link effect in jquery?如何在jquery中添加悬停链接效果？
【发布时间】：2019-03-12 15:46:07
【问题描述】：

顺便说一句抱歉，我以前从未接触过 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 来完成这项任务......

【问题讨论】：

是的，请添加您的整个代码。
为什么不使用 CSS hover 伪类来代替 jQuery？

标签： javascript jquery html css hover

【解决方案1】：

如果你想使用 jQuery 而不是 CSS，你应该这样做：

$("a").on("mouseover", function() {
  $(this).css("color", "green");
}).on("mouseout", function() {
  $(this).css("color", "black");
});

<script src="http://code.jquery.com/jquery-3.3.1.js"></script>

<a href="#">Hover on me!</a>

【讨论】：

谢谢！但这看起来代码应该在一个单独的 .js 文件中。我怎样才能使它以我列出的格式工作？全部在一个 html 文件中..？
@user3696118 把你现在的代码替换一下就好了，我只是修改了一下让它工作。

【解决方案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>

【讨论】：

您好，非常感谢您提供的示例。顺便说一句，这是打算存储在单独的 .js 文件中吗？我对 jquery 的理解是它的优点之一是它可以直接嵌入到 HTML 文件中，您将如何实现呢？
您可以在 HTML 页面上使用 <script> 和 </script> 标签中的 JavaScript 代码，这同样适用于 JQuery。 “sn-p 工具”将代码分隔在不同的部分，但这不是必需的。
但是为什么我列出的示例不起作用？是因为它缺少 $(document).ready(function) 部分吗？
我不相信这不起作用，看看你的更新。检查开发者控制台是否有任何错误。

【解决方案3】：

$(".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>

【讨论】：

【解决方案4】：

$('a') 运算符查找 DOM 中的所有锚元素并将其应用到它们。因为您的代码在 HTML 文档的头部同步运行，所以在代码运行时 DOM 中没有锚元素。为了将悬停代码应用到页面中的锚元素，您必须等到创建锚元素之后。您可以通过将您的代码放入 $(document).ready(function() { /*put your code here*/ }) 中来做到这一点，它将等待执行您的代码，直到所有 DOM 元素都添加到 DOM 中。

出于必要，启用“运行代码 sn-p”功能的该站点的沙箱掩盖了这类初始化问题，因为它必须做所有工作才能让 sn-ps 在现有页面内安全工作。

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

【讨论】：

hmmmm 我明白了，所以这有点像您添加到 HTML 页面中的“window.onload”代码？如果是这样，那么使用 jquery 语法的原因是什么？坚持使用常规的 javascript 语法并将所有内容分开（HTML/js）不是更好吗？

【解决方案5】：

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

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

看到这个：- Should Jquery code go in header or footer?

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

您必须在 <ready> 函数中添加点击，由于 DOM 的某些原因，您将不得不考虑另一种点击事件的方法。看到这个

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

Why is this jQuery click function not working?

【讨论】：

【解决方案6】：

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

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

&lt;a class="myClass"&gt;This is a link&lt;/a&gt;

如果你必须使用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>

【讨论】：

是的，我确信没有必要使用 jquery，但它用于学校作业，所以我们被告知使用它
绝对是这个。如果是为了学校作业作为一个简单的例子，那没关系，但请在以后的现实世界中，根本不要使用 JavaScript 来实现简单的悬停效果。（有些人这样做，但它没有使用正确的工具来完成这项工作。）CSS 有很大的功能，而且 StackOverflow 上的很多人在应该使用更多 CSS 时都使用 JavaScript。
@user3696118 我已经用你的代码添加了工作示例。