Почему эти два события запускаются неоднократно, когда они должны запускаться только один раз?

Question

Почему эти два события запускаются неоднократно, когда они должны запускаться только один раз?

0

Я написал следующий код, который должен показывать div, когда мышь над другим div, код работает, но события запускаются повторно, почему это так?

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <style type="text/css">
            #my-div {
                width: 100px;
                height: 100px;
                background-color: red;
            }
            .tooltip {
                width: 200px;
                height: 200px;
                background-color: red;
                display: none;
            }
        </style>
        <script src="jquery.min.js"></script>
    </head>

    <body>
        <div id="my-div"></div>
        <div class="tooltip"></div>
        <script type="text/javascript">
                    $('#my-div').on('mouseover', function() {
                        $('.tooltip').fadeIn(300);
                    });
                    $('#my-div').on('mouseleave', function() {
                        $('.tooltip').fadeOut(300);
                    });

        </script>
    </body>
</html>

ilgaar 03 окт. 2013, в 15:06

Источник

0

У меня отлично работает jsfiddle.net/QaJp4 .
Claudio Redi 03 окт. 2013, в 12:19
0

Mouseover и mouseout запускаются, когда мышь входит или покидает (иногда) соответствующий тег или один из его потомков
Stphane 03 окт. 2013, в 12:20

Теги:

jquery

repeat

events

triggers

3 ответа

0

Обратите внимание, что мышь и мышь запускаются, когда мышь входит или уходит (соответственно) соответствующий тег, или один из его потомков

Вы не увидите его в своем примере, потому что всплывающая подсказка уже исчезла. Попробуйте это.

$('#my-div').on('mouseover', function() {
    $('body').append('<span>one more time </span>');
    $('.tooltip').fadeIn(300);
});

Скриншот здесь

Stphane 03 окт. 2013, в 10:35

0

Я узнал, в чем проблема, я использую Coda и, похоже, имеет странную ошибку, я попробовал ее во всех других браузерах и работает нормально. Я написал этот код и, похоже, отлично работает в основных браузерах, но почему-то Coda отказывается запускать его правильно:

        function Tooltip() {

            this.showToolTip = function() {
                $(this.element).on('mouseenter', function(event) {
                    event.preventDefault();
                    $(that.tooltip).stop().fadeIn(300);
                });
            };

            this.hideToolTip = function() {
                $(this.element).on('mouseleave', function(event) {
                    event.preventDefault();
                    $(that.tooltip).stop().fadeOut(300);
                });
            };

            this.element = arguments[0];
            this.tooltip = arguments[1];
            var that = this;
        }

ilgaar 03 окт. 2013, в 09:32

Ещё вопросы

У меня отлично работает jsfiddle.net/QaJp4 .
Mouseover и mouseout запускаются, когда мышь входит или покидает (иногда) соответствующий тег или один из его потомков

Chokchai · Accepted Answer · 2013-10-03T10-51-00.000Z

Вы должны использовать mouseenter вместо mouseover, потому что mouseover всегда срабатывают, когда вы перемещаете мышь в цели.

И для большего количества вы должны добавить stop() чтобы остановить триггер анимации fadeOut() и fadeIn() в то же время, когда пользователь быстро и быстро перемещает мышь.

$('#my-div').on('mouseenter', function() {
   $('.tooltip').stop().fadeIn(300);
});
$('#my-div').on('mouseleave', function() {
   $('.tooltip').stop().fadeOut(300);
});