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

问题是由于a内的#choisir-ses-capsules元素被鼠标悬停所致。这会导致mouseout和mouseover在父级上重复触发。要在致电下一个stop(true)或fadeIn()之前修正此致电fadeOut()。

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

使用div悬停闪烁跨度问题

2 个答案: