在 Internet Explorer 上使用 mouseenter 和 moseleave 闪烁淡入淡出

Question

我有两个 div，它们在 mouseenter/mouseleave 上褪色 in/out 它们的 child 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>

Answer 1

我找到了解决办法。不使用 jQuery 的 fadeIn/fadeOut，而是从不透明度 0 和可见性隐藏开始，然后添加一个 class，其不透明度为 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>

在 Internet Explorer 上使用 mouseenter 和 moseleave 闪烁淡入淡出

Flashing fade with mouseenter and moseleave on Internet Explorer

internet-explorer

blink

hover

flashing