我有两个 div,它们在 mouseenter/mouseleave 上淡入/淡出他们的子 div。在所有浏览器上它看起来都不错,除了在 Internet Explorer 上(我需要让它在 Internet Explorer 上工作)。在 IE 上,当悬停在一个 div 上时会闪烁,而另一个仍在淡出。
如何防止这种眨眼?
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div class="parent" style="background:gray; padding: 50px; margin: 20px; width: 350px; height:50px;">
<div class="child" style="display: none; background:white; height: 100%;">
</div>
</div>
<div class="parent" style="background:gray; padding: 50px; margin: 20px; width: 350px; height:50px;">
<div class="child" style="display: none; background:white; height: 100%;">
</div>
</div>
</body>
<script>
$(document).ready(function(){
$(".parent").mouseenter(function(){
$(this).find(".child").stop().fadeIn();
});
$(".parent").mouseleave(function(){
$(this).find(".child").stop().fadeOut();
});
});
</script>
</html>