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的鼠標懸停/鼠標移出閃爍

回答

相關問題