internet-explorer - 在 Internet Explorer 上使用 mouseenter 和 moseleave 闪烁淡出
问题描述
我有两个 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>
解决方案
我找到了解决方案。不要使用 jQuery 的淡入/淡出,而是从不透明度 0 和可见性隐藏开始,然后添加一个不透明度为 1 和可见性在 mouseenter 上可见的类。
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
.child {
-webkit-transition: all 0.4s ease-in-out 0s;
-moz-transition: all 0.4s ease-in-out 0s;
-ms-transition: all 04s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
visibility: hidden;
opacity: 0;
}
.child-show {
visibility: visible;
opacity: 1;
}
</style>
</head>
<body>
<div class="parent" style="background:gray; padding: 50px; margin: 20px; width: 350px; height:50px;">
<div class="child" style="background: white; height: 100%;">
</div>
</div>
<div class="parent" style="background:gray; padding: 50px; margin: 20px; width: 350px; height:50px;">
<div class="child" style="background: white; height: 100%;">
</div>
</div>
</body>
<script>
$(document).ready(function(){
$(".parent").mouseenter(function() {
$(this).find(".child").addClass("child-show");
});
$(".parent").mouseleave(function() {
$(this).find(".child").removeClass("child-show");
});
});
</script>
</html>
推荐阅读
- html - 为什么引导容器会更改我的表单页眉边距?
- laravel - laravel 扩展(扩展)/覆盖特定供应商包文件的正确方法
- php - 如何将 Distinct 函数添加到数组或仅返回唯一值
- react-native - React-webcam 在 React Native webview 中不起作用
- c# - 如何使用 asp:Repeater 标签然后使用数据绑定表达式而不声明 Microsoft SQL Server 数据库?
- javascript - 在类中实现 Symbol.iterator 的语法是什么?
- typescript - 使用解构初始化构造函数调用中的类属性
- r - 有什么方法可以检查 2 个数据框中的某些重复行是否相同?
- group-by - 如何在 PowerBI 中实现 SQL groupby 和 where?
- python - 如何在函数内的循环中返回值?