Javascript JQuery-如何在div列表上使用hover（）事件？_Javascript_Jquery_Mouseover

Javascript JQuery-如何在div列表上使用hover（）事件？

javascript jquery

Javascript JQuery-如何在div列表上使用hover（）事件？,javascript,jquery,mouseover,Javascript,Jquery,Mouseover,我有以下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">...</d

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

上，就会发出

警报（“ref_3”）

问题：如何使用JQuery/Javascript实现这一点

更新：

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

有什么建议吗

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

您可以看到此代码正在工作

更新

查看您的代码，您可能希望尝试以下方法：

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

更好

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


测试
.listing{宽度：100px；高度：100px；边框：1px黑色实心；}
load（“jquery”，“1.4.1”）；
setOnLoadCallback（函数（）{
$（'#panel div.listing'）.mouseover（函数（）{
警报（$（this.attr（'id'））；
});
});
...
...
...
...

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

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

在调用上述函数之前，请确保将

包含在您的文件中。

与您的站点分离后，似乎可以正常工作

我建议只在代码中添加一个div，使用

hslisting

类。不要使用JS来注入它。看看你注射的方式是否有问题

很好用。

通常，“鼠标指针”事件比“鼠标指针”事件更好。从…起 :

“mouseenter事件与mouseover的不同之处在于它处理事件冒泡的方式。如果在本例中使用mouseover，那么当鼠标指针移动到内部元素上时，将触发处理程序。这通常是不受欢迎的行为。另一方面，mouseenter事件仅在鼠标进入其绑定到的元素时触发其处理程序，而不是后代。”

这不会在mouseenter和mouseleave上引起问题吗？我认为“hover”绑定为您提供了为over和out提供函数的能力……不，它不会引起任何问题。如果您想同时触发mouseenter和mouseleave的事件，hover很好。我收到以下错误：$（“#panel div.listing”）.mouseOver不是一个函数。这不起作用。我已经更新了我的原始帖子，以链接到我的live站点，以显示它是如何起作用的。BillyJ：我发布的代码可以工作。你可以在live测试中看到它正在运行。因此错误就在你的页面的某个地方。我没有看到你的代码中包含jquery。请学会在你的回复中比ju更具体st“它不起作用”。坦率地说，它让你听起来像个哭哭啼啼的婴儿。为什么会更好呢？mouseOver（）调用bind（），所以它的速度肯定会稍微慢一点。此外，根据测试，你的选择器并没有使遍历的强度降低。ty munch但pixeline我认为它使用的jquery使用的是javascript的getElementsByTagName（），因此fron中的标记“div”使类选择器速度更快，并且在此之前使用的ID应该更具体一些？您可以引用我的测试吗？我收到以下错误：$（“#panel div.listing”）.mouseOver不是一个函数。它是小写的mouseOver，我修复了它。我更新了我的原始帖子，链接到我的live站点，以显示它是如何工作的。这不起作用。我更新了我的原始帖子，链接到我的live站点，以显示它是如何工作的。下面是我在您的live页面上看到的问题：第341行，您正在查看对于class=“hlisting”且在第345行的div，您正在寻找class=“listing”的div，但在文档的正文中，您没有任何与这两个类相关的内容。（看起来您稍后使用JavaScript创建了一些，但我在上面链接的页面上没有看到任何内容。）这不起作用。我已经更新了我的原始帖子，链接到我的直播网站，以显示它是如何不起作用的。这相当粗糙：这是BillyJ的第一篇帖子。下层选民至少可以解释他的决定和论点。就我个人而言，当我读到你的问题时，我想：这真的很简单，基本的jquery内容。他真的尝试过吗？但问题是上是明确和良好的制定，显然你有一个问题，所以。。。

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