Question

我的Html：

<th>
<div class="relative">
  <span class="colHeader">
    <a class="colHeaderEl" data-index="1" id="extension" value="extension">extension</a>
    <div data-index="1" class="delAll">
      <button data-index="1" class="btn_del">
        <i class="icon-trash"></i>
      </button>
    </div>
  </span>
</div>
</th>

我的JS在鼠标中心：

$(this).find('.btn_del').css("display","block"); //doesn´t work?!

// $('.btn_del').css("display","block"); //＆lt; - 这是有效的，但是，我的所有.btn_del图标都设置为在我的菜单中显示 - 我只想显示一个图标，当我徘徊......

//（console.log知道，当我悬停时 - 所以函数有效）

定义功能：

"mouseenter th" : "delMouseEntered",
...

delMouseEntered: function(){
  $(this).find('.btn_del').css("display","block");
},
...

谢谢！

Answer 1

尝试在mouseenter上绑定th事件。然后找到按钮并显示它！

$(document).on('mouseenter', 'th', function() {
   $(this).find('.btn_del').css("display","block");
});

注意：

将事件绑定在父元素上。然后找到按钮并应用你想要的CSS

Answer 2

看起来你已经在锚上附加了事件处理程序，因为它是组中具有文本的唯一元素，并且对于其他父元素的绑定事件将适用于共享片段。在这种情况下，您需要定位悬停锚元素的下一个兄弟元素。

$('a.colHeaderEl').mouseenter(function() {
  $(this).next().show;
});

我相信你还需要在mouseout上隐藏元素。您可以.hover()为此：

$('a.colHeaderEl').hover(function() {
  $(this).next().show();
},function() {
  $(this).next().hide();
});;

jQuery：$（this）on mouseenter-function

2 个答案: