jQuery mouseover/mouseout闪烁

Question

我有以下HTML

<div class="individual">
    <div class="change">change</div>
    <div class="picture"><img src....></div>
</div>

在.change具有position: absolute;和不可见.在鼠标悬停时.picture,我想要.change出现,并在mouseout上消失.如果个人点击.change则会发生某些事情.

现在,当鼠标移过更改时,它被视为图片的鼠标输出,因此更改开始闪烁!

然后我做了这个jQuery:

$('.change').mouseout(function(){
    $('.picture').mouseout(function(){
        $(this).parent().children('.change').hide();
    });
});

$('.picture').mouseover(function(){
    var i = $(this).parent().children('.change').show();
});

这只是第一次工作正常!如果我移出图片,那么当我回来并继续改变时,一切都开始闪烁!我该怎么办？!

谢谢

Answer 1

使用'mouseenter'代替'mouseover'和'mouseleave'代替'mouseout'

$('.picture').mouseenter(function(){
   $(this).parent().children('.change').hide();
});



$('.picture').mouseleave(function(){
    var i = $(this).parent().children('.change').show();
});