jQuery-如何在DIV列表上使用hover（）事件？
[英]JQuery - how to use the hover() event on a list of DIVs?
问题描述
I have the following HTML: 
我有以下HTML：
<div id="panel">
<div class="listing" id="ref_1">...</div>
<div class="listing" id="ref_2">...</div>
<div class="listing" id="ref_3">...</div>
<div class="listing" id="ref_4">...</div>
</div>
What I should like to do is, when someone hovers over a div.listing , to alert() to the screen the id name. 我想做的是，当有人将鼠标悬停在div.listing ，将id名称alert()到屏幕上。
Meaning, if a person hovers over with their mouse the id="ref_3" , to alert("ref_3") ; 意思是，如果有人将鼠标悬停在id="ref_3" ，以发出alert("ref_3") ;
Question : How do I do this with JQuery/Javascript? 问题 ：如何使用JQuery / Javascript执行此操作？
UPDATE : 更新 ：
Linked below is the live site. 下面的链接是实时站点。 As you'll see, none of the answers below work. 如您所见，以下所有答案均无效。 (Line 340) （第340行）
http://tinyurl.com/ybbey4 http://tinyurl.com/ybbey4
Any recommendation? 有什么建议吗？
6 个解决方案
解决方案1
1 已采纳 2010-01-28 20:03:28
解决方案2
0 2010-01-28 20:06:21
better yet 更好
$('#panel div.listing').mouseover(function() {
alert($(this).attr('id'));
});
this works 这有效
<!DOCTYPE>
<html>
<head><title>test</title>
<style type="text/css">
.listing { width: 100px; height: 100px; border: 1px black solid; }
</style>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.4.1");
google.setOnLoadCallback(function() {
$('#panel div.listing').mouseover(function() {
alert($(this).attr('id'));
});
});
</script></head>
<div id="panel">
<div class="listing" id="ref_1">...</div>
<div class="listing" id="ref_2">...</div>
<div class="listing" id="ref_3">...</div>
<div class="listing" id="ref_4">...</div>
</div>
</body>
</html>
解决方案3
0
您当前是否在其他脚本文件中使用$作为函数，而不使用noConflict
解决方案4
0 2010-01-28 20:37:57
BillyJ, it sounds like you maybe aren't loading up the jQuery library in your HTML file. BillyJ，听起来您可能没有在HTML文件中加载jQuery库。
Be sure to include <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script> in your file before calling the above function. 确保在文件中包含<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script>在调用上面的函数之前。
解决方案5
0 2010-01-28 21:10:23
Seems to work fine separate from your site... 似乎与您的网站分开工作正常...
I'd suggest just adding a div in the code with a hslisting class. 我建议只在hslisting类的代码中添加一个div。 Don't use JS to inject it. 不要使用JS注入它。 See if something about the way you are injecting it is causing problems. 查看有关注射方式的一些信息是否引起问题。
http://jsbin.com/agosa works just fine. http://jsbin.com/agosa可以正常工作。
解决方案6
0 2010-01-28 21:11:17
The 'mouseenter' event is usually a better choice than 'mouseover'. “ mouseenter”事件通常比“ mouseover”事件更好。 From http://api.jquery.com/mouseenter/ : 从http://api.jquery.com/mouseenter/ ：
"The mouseenter event differs from mouseover in the way it handles event bubbling. If mouseover were used in this example, then when the mouse pointer moved over the Inner element, the handler would be triggered. This is usually undesirable behavior. The mouseenter event, on the other hand, only triggers its handler when the mouse enters the element it is bound to, not a descendant."
jQuery('#panel div.listing').bind('mouseenter',function(){
alert(this.id);
return false;
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.