1

マウスが div またはdivネストされた要素の上にある場合、ツールバーを表示したいと思います。ただし、jQuery 1.7 を使用した次のソリューションは、マウスが直接上にある場合にのみ機能します。これは、css クラスdivに a を追加した場合にのみ可能です。paddingitem

<head>
  <script type="text/javascript" src="jquery-1.7.min.js"></script>
  <style type="text/css">
    .toolbar { display: none; }
    .item { padding: 1px; } /* doesn't work without padding! */
  </style>
  <title>Demo</title>
</head>

    <body>

  <div class="section">
    <div class="item">
      <p class="toolbar">TOOLS</p>
      <p>content</p>
    </div>
    <div class="item">
      <p class="toolbar">TOOLS</p>
      <p>content</p>
    </div>
  </div>

  <script type="text/javascript">
    $(".section").on(
      "mouseenter",
      ".item",
      function(event) {

        $(event.target).children('.toolbar')
          .show(100);
      }
    )

    $(".section").on(
      "mouseleave",
      ".item",
      function(event) {
        $(event.target).children('.toolbar').hide();
      }
    )      
  </script>

</body>

1px のパディングはそれほど悪くはありませんが、上下のパディングが大きくなり、この回避策は適切に機能しません。特に、マウスが左側または右側から入った場合です。

mouseenterパディングトリックなしでmouseleaveイベントを処理するにはどうすればよいですか?

4

4 に答える 4

2

event.targetはdivではないようです-$(this)問題を修正するように変更します-> http://api.jquery.com/event.target/

http://jsfiddle.net/manseuk/StUvz/

于 2011-11-18T22:44:33.193 に答える
0

これもパディングなしで機能しますhttp://jsfiddle.net/rkpVW/ on(".item") を直接実行できます要素をバインドするための最も簡単なソリューションだと思います。

編集: http://jsfiddle.net/rkpVW/1/動的コンテンツにライブを使用

于 2011-11-18T22:49:03.580 に答える
0

を使用すると問題が解決され、他の何かがある状況でも引き続き機能するため$(event.currentTarget)、同じように動作します。$(this)this

init: function()
{
    $("button").on("mouseenter", this.proxy(function(event)
    {
        this.classMethod();

        console.log( event.currentTarget );
    }) );
}

ご覧のとおり、次のとおりevent.currentTarget です this。

$("button").on("mouseenter", function(event)
{
    console.log( event.currentTarget === this );
});
于 2013-06-16T06:18:37.970 に答える