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();
});

问题是当鼠标悬停在跨度上时，跨度个性化设置会闪烁。你可以在这里看到它：https://jsfiddle.net/567steh1/2/

是否有解决此问题并停止跨度闪烁的解决方案？

谢谢！

Answer 1

你必须停止动画 - 你可以使用 jQuery stop

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

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

Answer 2

问题是由于鼠标悬停在 #choisir-ses-capsules 中的 a 元素引起的。这会导致 mouseout 和 mouseover 在父级上重复触发。在调用下一个 fadeIn() 或 fadeOut().

之前修复此调用 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>

div 悬停时跨度闪烁问题

Blinking issue of span with div hover

jquery

hover

mouseover