JQuery - 如何在 DIV 列表上使用悬停（）事件？

发布于 2024-08-19 16:25:48 字数 750 浏览 8 评论 0原文

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

有什么推荐吗？

原文

I have the following 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.

Meaning, if a person hovers over with their mouse the id="ref_3", to alert("ref_3");

Question: How do I do this with JQuery/Javascript?

UPDATE:

Linked below is the live site. As you'll see, none of the answers below work. (Line 340)

http://tinyurl.com/ybbey4

Any recommendation?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

古镇旧梦 2024-08-26 16:25:48

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

您可以在此处查看此代码的运行情况。

更新

查看您的代码，您可能想尝试以下操作：

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

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

You can see this code working here.

UPDATE

looking at your code, you might want to try this instead:

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

回复收藏 0 原文

卖梦商人 2024-08-26 16:25:48

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

回复收藏 0 原文

热风软妹 2024-08-26 16:25:48

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

请务必包含

回复收藏 0 原文

倾城°AllureLove 2024-08-26 16:25:48

更好的是，

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

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>

回复收藏 0 原文

月野兔 2024-08-26 16:25:48

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

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

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

回复收藏 0 原文

空名 2024-08-26 16:25:48

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

“mouseenter 事件与 mouseover 事件的不同之处在于它处理事件冒泡的方式。如果在此示例中使用 mouseover，则当鼠标指针移到 Inner 元素上时，将触发处理程序。这通常是不良行为。另一方面，mouseenter 事件仅在鼠标进入其绑定的元素（而不是后代元素）时触发其处理程序。”

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

The 'mouseenter' event is usually a better choice than 'mouseover'. From
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;
});

回复收藏 0 原文

~没有更多了~

关于作者

红玫瑰

暂无简介

0 文章

0 评论

25 人气

关注发私信

尘世孤行

文章 0 评论 0

关注

烟─花易冷

文章 0 评论 0

关注

你是年少的欢喜

文章 0 评论 0

关注

倒带

文章 0 评论 0

关注

忱杏

文章 0 评论 0

关注

送君千里

文章 0 评论 0

友情链接

文江博客

JQuery - 如何在 DIV 列表上使用悬停（）事件？

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（6）

关于作者

相关话题

热门标签

推荐作者

尘世孤行

烟─花易冷

你是年少的欢喜

倒带

忱杏

送君千里

友情链接

JQuery - 如何在 DIV 列表上使用悬停（）事件？

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（6）

关于作者

相关话题

热门标签

推荐作者

尘世孤行

烟─花易冷

你是年少的欢喜

倒带

忱杏

送君千里

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。