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

3 回答 3

1

当您在目标中移动鼠标时，您应该使用mouseenter而不是mouseover因为mouseover总是触发。

此外，您还应该添加以在用户快速移入和移出鼠标的同时停止动画触发stop()。fadeOut()fadeIn()

$('#my-div').on('mouseenter', function() {
   $('.tooltip').stop().fadeIn(300);
});
$('#my-div').on('mouseleave', function() {
   $('.tooltip').stop().fadeOut(300);
});
于 2013-10-03T12:29:19.030 回答
0

您希望mouseout的行为与mouseleave相同。

mouseleave和mouseout相似，但不同之处在于mouseleave不会冒泡，而mouseout会。这意味着当指针离开元素及其所有后代时触发 mouseleave，而当指针离开元素或离开元素的后代之一时触发 mouseout（即使指针仍在元素内）。( MDN )

mouseover与 mouseenter几乎相同

将鼠标悬停在红色容器及其下面包含的文本时，查看鼠标悬停的频率（注意计数器）：

let $p = $('p').eq(0)
    , $tooltip = $('.tooltip').eq(0)
;

$('#target')
  .on('mouseover', () => {
    // Counting fired mouseover events
    $p.text((+$p.text() || 0)+1);
    $tooltip.fadeIn(300);
  })

  .on('mouseleave', () => {
    $tooltip.fadeOut(300);
  });
#target {width: 50px; height: 50px; background-color: red;}
.tooltip {width: 100px; height: 50px; background-color: red; display: none;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="target"><div>Test</div></div>
<div class="tooltip"></div>
<p></p>

于 2013-10-03T12:28:12.797 回答
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;
        }
于 2013-10-03T12:24:35.677 回答