只将鼠标悬停在具有相同类 jquery 的 1 个元素上答案

【问题标题】：hover over only 1 element with same class jquery只将鼠标悬停在具有相同类 jquery 的 1 个元素上
【发布时间】：2012-01-30 01:07:41
【问题描述】：

我在 jquery 中有这段代码：

$(".pun").hover(function() {
 $(".guns").show(0);        
});

我的html

<div class="pun">
<div class="guns">gun 1</div>
</div>
<div class="pun">
<div class="guns">gun 2</div>
</div>
<div class="pun">
<div class="guns">gun 3</div>
</div>

我的 CSS

.pun {
display:visible
}

.guns {
display:none
}

我想做悬停动作，只显示悬停的项目。现在，如果您悬停显示每个 div 枪。

【问题讨论】：

标签： jquery jquery-selectors hover css-selectors

【解决方案1】：

要仅显示您悬停的pun div 内的guns div，请使用find 函数

$(".pun").hover(function() {
   $(this).find(".guns").show(0);        
});

或者为您的选择器提供上下文

$(".pun").hover(function() {
   $(".guns", this).show(0);        
});

另外，show 的默认设置不执行动画，因此您可以将 .show(0); 替换为 show();

【讨论】：

【解决方案2】：

仅使用 CSS 更容易实现：

div.pun div.guns {
    display: none;
}

div.pun:hover div.guns {
    display: block;
}

顺便说一句，visible 不是 display 属性的有效值。而且，您缺少hover() 的第二个参数（如果您坚持使用 jQuery）。您可能应该在第二个函数中使用hide() .guns，或者如果您只想显示它们（并且从不隐藏它们），您可以使用mouseover() 而不是hover()。

【讨论】：

虽然我同意这是完成同样事情的更好方法；这不是问的问题。问题是关于用 jquery 做的。
如果你指的是 IE6 及以下版本。 @Chad - 是的。但如果有人问如何使用表格创建两列布局，我不会告诉那个人如何 - 我会描述如何正确地做到这一点。
然而，如果不是故意隐藏枪 onmouseout()（或 hover() 中的第二个函数），CSS 解决方案将无法工作。如果是这种情况，您的答案显然更好。我会给它+1。
看起来连 IE7 都不喜欢 :hover bernzilla.com/item.php?id=762 但你的回答是呼吸新鲜空气，所以 +1 ---
显示可见的以了解 .pun 的状态。我的 css 中没有显示可见 :D.. 谢谢

【解决方案3】：

改变

$(".guns").show(0);

到

$(".guns", this).show(0);

这将只选择悬停元素上下文中的'.guns'。 (jsFiddle)

【讨论】：

【解决方案4】：

悬停时有两个events 有界，mouseover 和mouseout。你可能想把它隐藏在mouseout

$(".pun").hover(function() {
   $(this).children(".guns").show(100);        
},function(){
   $(this).children(".guns").hide(100);
});

【讨论】：

【解决方案5】：

您可以通过 id 来识别它们，或者类似的东西应该可以工作（未经测试）：

$(".pun").hover(function() {
    $(this).children(".guns:first").show(0);        
});

【讨论】：

【解决方案6】：

做一个子选择

$(".pun").hover(function() {
    $(this).children(".guns").show(0);        
});

【讨论】：