Блог

Главная - Вопросы по программированию - Мигание исчезает с помощью mouseenter и moseleave в Internet Explorer

Мигание исчезает с помощью mouseenter и moseleave в Internet Explorer

#internet-explorer #hover #blink #flashing

#internet-explorer #наведение #мигание #мигание

Вопрос:

У меня есть два подразделения, которые в mouseenter / mouseleave они исчезают в / из своего дочернего подразделения. Во всех браузерах это выглядит хорошо, кроме Internet Explorer (я должен заставить это работать в Internet Explorer). В IE при наведении курсора мыши на div появляется мигание, в то время как другой все еще исчезает.

Как можно предотвратить это мигание?

Вот GIF-файлы, иллюстрирующие проблему: Chrome
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>

Ответ №1:

Я нашел решение. Вместо использования fadeIn / fadeOut в 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>

Метки: