jquery - 仅将鼠标悬停在 1 个具有相同 jquery 类的元素上

Question

我在 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 枪支。

Answer 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();