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');    
        }
    });
});

如果我在我的html中取出<div class="sdf">sdf</div>悬停有效，但是当我的html中测试和lol之间有另一个div时，有没有办法让这个悬停工作？

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');    
        }
    });
});

否则使用

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

Answer 2

你可以这样做，看看它是如何运作的http://jsfiddle.net/nLybj/4/：

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

jquery mouseover div影响另一个div

2 个答案: