在鼠标上显示按钮

Question

上下文

我有一个带文件夹的树状视图（ .directory ）：

当我鼠标悬停在文件夹上时，我会显示/隐藏按钮（ .delete 和 .add ）。

我需要点击此按钮。

问题

当我鼠标移动 .directory 时，如何让按钮显示？

代码

html

<li>
    <a class="directory">TEST</a>
    <a class="delete" style="display: none;"></a>
    <a class="add" style="display: none";></a>
</li>

jquery

$('a.directory').on({
    mouseenter: function() {
        $(this).parent().find('a.delete, a.add').show();
    },
    mouseleave: function() {
        $(this).parent().find('a.delete, a.add').hide();
    }
});

Answer 1

试着把它包起来

<div class="directory">
  <a class="value">TEST</a>
  <a class="delete" style="display: none;"></a>
  <a class="add" style="display: none";></a>
</div>

然后在悬停目录时，当您悬停.delete或.add

时，它仍会悬停

$('div.directory').on({
    mouseenter: function() {
        $(this).children('a.delete, a.add').show();
    },
    mouseleave: function() {
        $(this).children('a.delete, a.add').hide();
    }
});

Answer 2

你应该将三个元素包装在一个块元素中，比如div，并在div上执行mouseenter