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

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

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

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

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

此外，show的默认设置不会执行任何动画，因此您只需.show(0);替换show();

Answer 2

仅使用CSS更容易实现：

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

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

顺便说一下，visible不是display属性的有效值。而且，你错过了hover()的第二个参数（如果你坚持使用jQuery）。您可能应该hide()第二个函数中的.guns，或者如果您只想展示它们（并且从不隐藏它们），您可以使用mouseover()代替hover()。< / p>

Answer 3

更改

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

要

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

这将仅在悬停元素的上下文中选择'.guns'。（jsFiddle）

Answer 4

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

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

Answer 5

进行子选择

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

Answer 6

在悬停时，有两个events有界，mouseover和mouseout。您可能希望将其隐藏在mouseout

上

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

仅使用相同的类jquery悬停在1个元素上

6 个答案: