jQuery鼠标悬停/鼠标闪烁 [英] jQuery mouseover/mouseout flickers

问题描述

我有以下HTML

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

.change具有position: absolute;，并且是不可见的.当鼠标悬停在.picture上时，我希望.change出现，而当鼠标悬停时，我希望其消失.如果个人单击.change，那应该会发生.

The .change has position: absolute; and is invisible. On mouseover .picture, I want .change to appear, and on mouseout, to disappear. If the individual clicks .change then something should happen.

现在，当鼠标移至更改时，则将其视为图片的鼠标移出，因此更改开始闪烁！

Right now, when mouse goes over change, then it is treated as mouseout of picture, and so change starts to flicker!

然后我制作了这个jQuery:

I then made this jQuery:

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

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

这仅在第一次有效！如果我移开图片，那么当我重新打开并继续进行更改时，一切开始闪烁！！我该怎么办?！

This works fine only the first time! If I move out the picture, then when I come back on, and go on change, everything starts to flicker!! What do I do?!

谢谢

推荐答案

使用"mouseenter"代替"mouseover"，并使用"mouseleave"代替"mouseout"

Use 'mouseenter' instead of 'mouseover' and 'mouseleave' instead of 'mouseout'

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



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

这篇关于jQuery鼠标悬停/鼠标闪烁的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！