在 Internet Explorer 上使用 mouseenter 和 mouseleave 闪烁淡出答案

【问题标题】：Flashing fade with mouseenter and moseleave on Internet Explorer在 Internet Explorer 上使用 mouseenter 和 mouseleave 闪烁淡出
【发布时间】：2021-04-29 21:55:30
【问题描述】：

我有两个 div，它们在 mouseenter/mouseleave 上淡入/淡出他们的子 div。在所有浏览器上它看起来都不错，除了在 Internet Explorer 上（我需要让它在 Internet Explorer 上工作）。在 IE 上，悬停在一个 div 上时会闪烁，而另一个仍在淡出。

如何防止闪烁？

这里有 GIF 来说明问题：

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

【问题讨论】：

标签： internet-explorer hover blink flashing

【解决方案1】：

我找到了解决方案。不要使用 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>

【讨论】：