Question

我正在尝试获取一个div来显示链接何时悬停。

也会有多个班级，所以只有最近的班级才能显示。

这就是我正在尝试的：

$(".box").hover(function() {
    $('.overlay').closest.show();
});

<div class="event" id="selector">                                       
    <a class="box" href="#" title="">Event</a>      
    <div class="overlayOuter">    
        <div class="overlayInner"></div>    
    </div>    
    <div class="overlay" style="display:none;"> I will come out when class Box is covered 
    </div>    
</div>

当我悬停class="box"时，会显示class="overlay"。

问题是Overlay没有出现所以我猜我的jquery是错的？

我怎样才能让它发挥作用？

Answer 1

试试这个，叠加不是父母，它是兄弟，最近（）得到最近的父母

   $(this).siblings('.overlay').show();

Answer 2

试试这个：

$(this).siblings('.overlay').show();

Answer 3

你需要使用.siblings（），因为overlay不是祖先元素，它是兄弟元素

$(".box").hover(function() {
    $(this).siblings('.overlay').show()
})

Answer 4

在目前的情况下，overlay是兄弟姐妹，closest获得最近的父母。

Closest

对于集合中的每个元素，获取与之匹配的第一个元素选择器通过测试元素本身并遍历其中 DOM树中的祖先。

Siblings

获取匹配元素集中每个元素的兄弟姐妹，可选择由选择器过滤。

代码：

$(".box").hover(function() {
    $(this).siblings('.overlay').show();
});

演示：http://jsfiddle.net/IrvinDominin/tJr2e/

悬停问题上的JQuery Show Class

4 个答案: