Question

我有：

<div class='someclass'>Text</div>
<div class='otherclass'>Other Text</div>
<style>
    .someclass{
        width:400px;
        height:200px;
    }
    .otherclass{
        width:400px;
        height:200px;
        display:none;
    }
</style>

$('.someclass').mouseover(function(){
    $('.otherclass').fadeIn();
});
$('.someclass).mouseout(function(){
    $('.otherclass').fadeOut();
});

但是如果光标越过第二个div，我不希望第二个div淡出。

我可以用

$('.someclass,.otherclass').mouseover(function(){
    $('.otherclass').fadeIn();
});
$('.someclass,.otherclass').mouseout(function(){
    $('.otherclass').fadeOut();
});

但是从一个div到另一个div会闪烁。

我想，我可以使用超时，但还有更好的方法吗？ THX！

Answer 1

我猜你正在将它用于导航子菜单或类似的东西。

我建议在.someclass中嵌套.otherclass。

Answer 2

可以将两个DIV包装在另一个元素中，并将悬停函数放在该外部元素上。这应该涵盖你介于两者之间的时间。

Answer 3

将'otherclass'放入'someclass'并设置为someclass min-height：200px;

<div class="someclass">
 <div>Some text</div>
 <div class="otherclass">text</div>
</div>

jQuery绑定到多个元素

3 个答案: