如何在jquery中添加悬停链接效果？
[英]how to add hover link effect in 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 ...
6 个解决方案
解决方案1
2 2018-10-08 01:33:00
如果要使用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>
解决方案2
2 2018-10-08 01:37:15
我已经为您提供了一个可行的基本示例，希望对您有所帮助。
$(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>
解决方案3
2 2018-10-08 02:40:25
对于这样一个简单的问题，您不需要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>
解决方案4
1 2018-10-08 01:48:08
$(".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>
解决方案5
1 2018-10-08 01:58:10
$('a')运算符可找到DOM中的所有锚元素，并将其后的内容应用于它们。 因为您的代码在HTML文档的开头同步运行，所以在代码运行时DOM中没有锚元素。 为了将悬浮代码应用于页面中的锚元素，您必须等到锚元素创建之后。 您可以通过将代码放入$(document).ready(function() { /*put your code here*/ })来执行此操作，这将等待执行代码，直到将所有DOM元素添加到DOM中为止。
不必要地，启用“运行代码段”功能的该站点的沙箱掩盖了这类初始化问题，因为它需要做所有工作才能使代码段在现有页面中安全地工作。
对于此示例，使用CSS hover伪类会更好，因为它不会出现此问题（即使稍后添加它们也会影响页面上的所有锚元素），但是如果您要执行此操作，您仍然希望使用jQuery触发不是CSS可以处理的（例如，如果您想暂停播放视频以响应悬停）。
解决方案6
1 2018-10-08 02:08:24
我可以在HTML页面内添加jQuery吗？
您可以在页面中添加jQuery代码。 但是，在底部添加（恰好在</html> close标签之前）会很好。
看到这个： -jQuery代码应该放在页眉还是页脚中？
为什么单击功能不起作用？
您必须在<ready>函数中添加click，由于DOM的某些原因，您将不得不考虑click事件的另一种处理方式。 看到这个
我可以在HTML页面内添加jQuery吗？
如何使用jQuery添加焦点和悬停效果
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.