使用div懸停閃爍的跨度問題

Question

我想在鼠標懸停在div＃choisir-ses-capsules上時顯示跨度（或div）。

<div id="choisir-ses-capsules">Deliver with <a id="capsule_1">cap 1</a>,<a id="capsule_2">cap 2</a> et <a id="capsule_3">cap 3</a> <span id="personnaliser" style="display: none;">Change</span> 

$('#choisir-ses-capsules').mouseover(function (e) { 
    $("#personnaliser").fadeIn(); 
}); 

$('#choisir-ses-capsules').mouseout(function (e) { 
    $("#personnaliser").fadeOut(); 
}); 

的問題是，當鼠標在跨度，personnaliser閃爍跨度。你可以在這裏看到：https://jsfiddle.net/567steh1/2/

任何解決方案來解決這個問題，並停止跨度閃爍？

謝謝！

Answer 1

問題是由於#choisir-ses-capsules內a元素的鼠標懸停。這會導致mouseout和mouseover對父級重複觸發。要在撥打下一個fadeIn()或​​之前修復此調用stop(true)。

$('#choisir-ses-capsules').on({ 
    mouseover: function(e) { 
     $("#personnaliser").stop(true).fadeIn(); 
    }, 
    mouseout: function(e) { 
     $("#personnaliser").stop(true).fadeOut(); 
    } 
}); 

話雖這麼說，你既可以避開這個問題，通過只在CSS這樣做提高性能：

#personnaliser { 
 
    opacity: 0; 
 
    transition: opacity 0.3s; 
 
} 
 
#choisir-ses-capsules:hover #personnaliser { 
 
    opacity: 1; 
 
}

<div id="choisir-ses-capsules"> 
 
    Deliver with <a id="capsule_1">cap 1</a>, <a id="capsule_2">cap 2</a> et <a id="capsule_3">cap 3</a> 
 
    <span id="personnaliser">Change</span> 
 
</div>

Answer 2

你必須停止動畫 - 你可以使用jQuery stop

$('#choisir-ses-capsules').mouseover(function (e) { 
    $("#personnaliser").stop().fadeIn(); 
}); 

$('#choisir-ses-capsules').mouseout(function (e) { 
    $("#personnaliser").stop().fadeOut(); 
});