CODEWITHSUNDEEP
jqueryhovermouseover
Jérôme
Jérôme

Reputation: 13

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) {
    $("#personnaliser").fadeIn();
});

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

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 !

Upvotes: 1

Views: 373

Answers (2)

Rory McCrossan
Rory McCrossan

Reputation: 337570

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().

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

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>
</div>

Upvotes: 1

enkdr
enkdr

Reputation: 363

You have to stop the animation - you can use jQuery stop

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

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

Upvotes: 0

Related Questions