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代わりに使用する必要があります。mouseovermouseover

さらに、ユーザーがマウスをすばやく出し入れしたときに同時にアニメーショントリガーを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

何が問題なのか、私は 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 に答える
0

mouseoutがmouseleaveと同じように動作することを期待していました。

mouseleaveとmouseoutは似ていますが、 mouseleaveはバブリングせず、 mouseoutはバブリングするという点で異なります。これは、ポインターが要素とそのすべての子孫を出たときに mouseleave が発生するのに対し、ポインターが要素を離れたとき、または要素の子孫の 1 つを離れたときに 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 に答える