如何在jQuery中添加悬停链接效果?

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

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

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

如果你想用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>

你不需要Javascript来解决这么简单的问题。你可以只使用:hoverCSS 伪类。

.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>

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

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

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

看到这个：- Jquery代码应该放在页眉还是页脚？

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

您必须在函数中添加单击<ready>，出于某些原因，对于 DOM，您将不得不考虑单击事件的另一个应用程序。看到这个

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

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

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

出于必要，此站点启用"运行代码片段"功能的沙盒掩盖了此类初始化问题，因为它必须执行所有工作才能使代码片段在现有页面中安全运行。

对于此示例，使用 CSShover伪类会更好，因为它不会有此问题(即使稍后添加它们也会影响页面上的所有锚元素(，但是如果您正在触发的操作不是可以通过 CSS 处理的操作(例如，如果要暂停播放视频以响应悬停(。

相关内容

最新更新

热门标签：