如何在jquery中添加悬停链接效果？
[英]how to add hover link effect in jquery?
问题描述
apologies by the way, i have never touched jquery before so i have no idea what i am doing. 
抱歉，我之前从未接触过jquery，所以我不知道自己在做什么。
i am trying to add a bit of jquery code in my html page, i cannot really paste the entire page, but essentially i have this block contained in section: 我试图在我的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>
however, the links on my page does not reflect the hover effects changes i wrote here 但是，我页面上的链接不能反映我在此处写的悬停效果更改
what could i be doing wrong? 我可能做错了什么？ and please let me know if the entire page has be posted in order for any sort of troubleshooting... 请让我知道是否已发布整个页面以便进行各种故障排除...
EDIT: okay I have made a test page, there isn't much on it, but the jquery commands still does not work here: 编辑：好的，我做了一个测试页，上面没有太多内容，但是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: i understand that it is not necessary to be using javascript/jquery for any of this, but this is for a school assignment and it says to be using jquery for this task... PS：我知道没有必要为此使用javascript / jquery，但这是用于学校作业，它说正在为此任务使用jquery ...
6 个解决方案
解决方案1
2 2018-10-08 01:33:00
This is the way you should do it if you want to do it with jQuery and not CSS: 如果要使用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
I have made you a basic example where this is working, i hope it help you. 我已经为您提供了一个可行的基本示例，希望对您有所帮助。
$(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
You don't need Javascript for such a simple problem. 对于这样一个简单的问题，您不需要Javascript。 You can just use the :hover CSS pseudo class. 您可以只使用:hover CSS伪类。
.myClass{ color: black; } .myClass:hover{ color: green; }
<a class="myClass">This is a link</a>
If you must use jQuery, you can use the .hover() function with the first argument being the function to execute on hover and the second argument being the function to execute when the element is no longer hovered over. 如果必须使用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>
Your example does not work because you are trying to access the DOM before it is ready. 您的示例不起作用，因为您尝试在DOM准备就绪之前对其进行访问。 You should add event listeners inside $(document).ready(function(){}) or equivalently, $(function(){}) . 您应该在$(document).ready(function(){})或等效的$(function(){})内添加事件侦听器。 Working example with your code ( http://jsfiddle.net/oe6m38xj/ ): 您的代码的工作示例（ 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>
If you want to listen for all hover events on dynamically created a elements you can listen to hover events on the document that match "a" (that is, being an anchor element). 如果要侦听动态创建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
The $('a') operator finds all the anchor elements in the DOM and applies what follows to them. $('a')运算符可找到DOM中的所有锚元素，并将其后的内容应用于它们。 Because you have your code running synchronously in the head of your HTML document, there are no anchor elements in the DOM at the time that code runs. 因为您的代码在HTML文档的开头同步运行，所以在代码运行时DOM中没有锚元素。 In order to apply your hover code to the anchor elements in the page, you have to wait until after the anchor elements are created. 为了将悬浮代码应用于页面中的锚元素，您必须等到锚元素创建之后。 You can do this by putting your code inside $(document).ready(function() { /*put your code here*/ }) which will wait to execute your code until all the DOM elements are added to the DOM. 您可以通过将代码放入$(document).ready(function() { /*put your code here*/ })来执行此操作，这将等待执行代码，直到将所有DOM元素添加到DOM中为止。
Out of necessity, this site's sandbox that enables the "Run code snippet" functionality obscures these kind of initialization problems because of all work it has to do to get the snippets to work safely inside an existing page. 不必要地，启用“运行代码段”功能的该站点的沙箱掩盖了这类初始化问题，因为它需要做所有工作才能使代码段在现有页面中安全地工作。
Using the CSS hover pseudo-class would be better for this example as it would not have this problem (it would affect all anchor elements on the page even if they are added later), but you would still want to use jQuery if the action you are triggering is not something that can be handled via CSS (for example, if you wanted to pause playing a video in response to the hover). 对于此示例，使用CSS hover伪类会更好，因为它不会出现此问题（即使稍后添加它们也会影响页面上的所有锚元素），但是如果您要执行此操作，您仍然希望使用jQuery触发不是CSS可以处理的（例如，如果您想暂停播放视频以响应悬停）。
解决方案6
1 2018-10-08 02:08:24
Can i add jQuery inside the HTML page? 我可以在HTML页面内添加jQuery吗？
You can add your jQuery code in the page. 您可以在页面中添加jQuery代码。 But adding at the bottom (just before the </html> close tag) will be good. 但是，在底部添加（恰好在</html> close标签之前）会很好。
see this:- Should Jquery code go in header or footer? 看到这个： -jQuery代码应该放在页眉还是页脚中？
Why click function is not working? 为什么单击功能不起作用？
You have to add click inside <ready> function, for some reasons with DOM you will have to think about some another approch for click event. 您必须在<ready>函数中添加click，由于DOM的某些原因，您将不得不考虑click事件的另一种处理方式。 see this 看到这个
Can i add jQuery inside the HTML page? 我可以在HTML页面内添加jQuery吗？
Why is this jQuery click function not working? 为什么这个jQuery click函数不起作用？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.