jQuery: $(this) on mouseenter-function

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"); // // $('.btn_del').css("display","block"); // <- 這有效，但是，我所有的.btn_del圖標都設置為顯示在我的菜單中-當我懸停時，我只想顯示一個圖標...

//（console.log 知道，當我懸停時 - 所以該功能有效）

定義函數：

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

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

謝謝！

Answer 1

嘗試在th上綁定mouseenter事件。 然后找到按鈕並顯示它！

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