0

mouseenter/mouseleave で子 div をフェードイン/フェードアウトする 2 つの div があります。Internet Explorer を除いて、すべてのブラウザで問題なく表示されます (Internet Explorer で動作させるには、これを作成する必要があります)。IE では、他の div がまだフェードアウトしているときに div にカーソルを合わせると点滅します。

そのまばたきをどのように防ぐことができますか？

問題を説明する gif を次に示します。 クロム IE

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

4

1 に答える 1