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

Answer 2

我总是发现mouseout和mouseover相当错误。不知道为什么，你可以试试：

$(function() { 
    $('.picture').hover(function() {
        $('.change').show();
    },function() { $('.change').hide(); });
});

只要出现＆＃34; .change＆＃34;没有移动＆＃34; .picture＆＃34;，导致悬停被破坏，那么这应该适合你。

Answer 3

问题是隐藏.change会将.picture元素移动到.change曾经的位置。这将触发.mouseover()和.mouseenter()，因此没有必要替换。

您应该将两个元素的CSS定位更改为绝对，因此删除.change将不会移动.picture

Answer 4

尝试：

.change { 
    pointer-events: none;
}

jQuery mouseover / mouseout闪烁

4 个答案: