Jquery鼠标悬停div影响另一个div

Question

我有

HTML:

<div class="test">test</div>
<div class="sdf">sdf</div>
<div class="lol">lol</div> 

CSS:

.hide { display: none; } 

Jquery:

$(document).ready(function(){
    $(".test").on({
        mouseover: function(){
            $(this).next('.lol').addClass('hide');
        },
        mouseout: function(){
            $(this).next('.lol').removeClass('hide');    
        }
    });
});

如果我拿出<div class="sdf">sdf</div>在我的html悬停工作，但是有一种方法，使这个悬停工作时，在测试和lol之间的另一个div在我的html?

Answer 1

问题是.lol不是.test的下一个兄弟，它是下一个元素的下一个兄弟。

如果在同一父元素中没有其他lol元素，则可以使用.siblings()

$(document).ready(function(){
    $(".test").on({
        mouseover: function(){
            $(this).siblings('.lol').addClass('hide');
        },
        mouseout: function(){
            $(this).siblings('.lol').removeClass('hide');    
        }
    });
});

else use

$(this).next().next('.lol')....

Answer 2

您可以简单地这样做，看看它是如何工作的http://jsfiddle.net/nLybj/4/:

$(document).ready(function(){
    $(".test").hover(function () {
        $(this).nextAll('.lol').toggleClass("hide");
    });
});