Question

如果鼠标位于div或任何div的嵌套元素上，我想显示工具栏。但是，以下使用jQuery 1.7的解决方案仅在鼠标直接位于div之上时才有效，只有在padding css类添加item时才能实现。

<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事件？

Answer 1

This fiddle我创建的作品没有填充。也许你只需要调整一些小的东西（比如CSS链中继承的宽度）。

如果没有为您解答，请给我们一个小提琴，重现问题，以便我们为您修改。

Answer 2

似乎event.target不是div - 更改为$(this)解决问题 - ＆gt; http://api.jquery.com/event.target/

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

Answer 3

这一个没有填充的工作，http://jsfiddle.net/rkpVW/你可以直接进行打开（“。item”）我认为这是绑定元素最简单的解决方案。

编辑：http://jsfiddle.net/rkpVW/1/使用实时动态内容

Answer 4

使用$(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 );
});

使用jQuery处理div和嵌套元素上的mouseenter / mouseleave

4 个答案: