4

我有以下 HTML

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

有.change并且position: absolute;是不可见的。在 mouseover 上.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();
});

这只有第一次才能正常工作！如果我把图片移出，然后当我重新打开并继续更改时，一切都开始闪烁！！我该怎么办？！

谢谢

4

4 回答 4

17

使用“mouseenter”代替“mouseover”和“mouseleave”代替“mouseout”

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



$('.picture').mouseleave(function(){
    var i = $(this).parent().children('.change').show();
});
于 2013-02-26T09:54:21.847 回答
3

我一直发现 mouseout 和 mouseover 相当有问题。不知道为什么，你可以试试：

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

只要“.change”的外观不移动“.picture”，导致悬停被打破，那么这应该适合你。

于 2013-02-26T10:02:34.857 回答
2

尝试：

.change { 
    pointer-events: none;
}
于 2019-07-24T14:11:47.013 回答
1

问题是隐藏.change会将.picture元素移动到以前的位置.change。这将触发两者.mouseover()，.mouseenter()因此没有必要更换。

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

于 2013-02-26T09:56:28.760 回答