Jérôme Jérôme - 9 months ago 48
jQuery Question

Blinking issue of span with div hover

I want to show a span (or a div) when the mouse hovers over a div #choisir-ses-capsules.

<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) {

$('#choisir-ses-capsules').mouseout(function (e) {

The issue is that when the mouse is over a span, the span personnaliser blinks. You can see it here : https://jsfiddle.net/567steh1/2/

Any solution to fix this and stop the span blinking ?

Thanks !

Answer Source

The issue is due to the mouseover of the a elements within the #choisir-ses-capsules. This causes the mouseout and mouseover to fire repeatedly on the parent. To fix this call stop(true) before calling the next fadeIn() or fadeOut().

    mouseover: function(e) {
    mouseout: function(e) {

That being said, you can both avoid the problem and improve performance by doing this in CSS alone:

#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>