jQuery的鼠标悬停/鼠标移出闪烁

我有以下的HTMLjQuery的鼠标悬停/鼠标移出闪烁

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

的.change有position: absolute;和不可见。在鼠标悬停.picture上，我想要.change出现，并在鼠标悬停时消失。如果个人点击.change那么应该发生一些事情。

现在，当鼠标经过改变，它被视为图片的鼠标移动，所以改变开始闪烁！

我再发这个jQuery：

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

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

这正常仅在第一次！如果我搬出这张照片，那么当我回来时，继续改变，一切都开始闪烁！我该怎么办？！

感谢

来源

2013-02-26 user1083320

在鼠标悬停时，显示'change'时，它是否显示图片？ – luckystars 2013-02-26 10:06:28

使用“的mouseenter”而不是“鼠标悬停”和而不是“鼠标移开”“鼠标离开”

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



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

来源

2013-02-26 09:54:21 luckystars

“它们通过触发每个鼠标悬停/鼠标悬停事件来查看DOM，看看用户是否真的”进入“或”离开“了给定的元素。” – Johnston 2013-06-13 18:23:39

太棒了！它像一个魅力:) – frabiacca 2014-01-25 09:41:30

的问题是，隐藏.change将.picture元素移动到的地方.change以前是。这将触发.mouseover()和.mouseenter()，所以没有必要更换。

你应该改变CSS定位于绝对的两个元素，以便消除.change不会移动.picture

来源

2013-02-26 09:56:28 devnull69

我一直觉得鼠标移出将鼠标悬停是相当马车。不知道为什么，你可以尝试：

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

只要“.change”不动“.picture”的出现，导致悬停被打破，那么这应该为你工作。

来源

2013-02-26 10:02:34

jQuery的鼠标悬停/鼠标移出闪烁

回答

相关问题