Question

我有以下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>

我想要做的是，当有人在div.listing上悬停alert()时，屏幕上显示id名称。

意思是，如果一个人用鼠标将id="ref_3"徘徊到alert("ref_3");

问题：如何使用JQuery / Javascript执行此操作？

更新：

以下链接是实时网站。正如您将看到的，以下答案都不起作用。（第340行）

http://tinyurl.com/ybbey4

任何建议？

Answer 1

$('.listing').bind('mouseover',function(){
alert($(this).attr('id'));
});

您可以看到此代码正常工作here。

更新

查看您的代码，您可能想尝试这样做：

$('.hlisting').live('mouseover',function(){
alert($(this).attr('id'));
});

Answer 2

更好

$('#panel div.listing').mouseover(function() {
  alert($(this).attr('id'));
});

这是有效的

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

Answer 3

您当前是否在其他脚本文件中使用$作为函数，而不使用noConflict

Answer 4

BillyJ，听起来你可能没有在HTML文件中加载jQuery库。

在调用上述功能之前，请务必在文件中加入<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script>。

Answer 5

似乎与您的网站分开工作......

我建议只在代码中添加一个带有hslisting类的div。不要使用JS来注入它。看看你注射它的方式是否会导致问题。

http://jsbin.com/agosa效果很好。

Answer 6

'mouseenter'事件通常是比'mouseover'更好的选择。从 http://api.jquery.com/mouseenter/：

“mouseenter事件与鼠标悬停在处理事件冒泡的方式上有所不同。如果在此示例中使用鼠标悬停，则当鼠标指针移动到Inner元素上时，将触发处理程序。这通常是不合需要的行为。另一方面，mouseenter事件只在鼠标进入绑定的元素时触发其处理程序，而不是后代。“

jQuery('#panel div.listing').bind('mouseenter',function(){
  alert(this.id);
  return false;
});

JQuery - 如何在DIV列表中使用hover（）事件？

6 个答案: