Question

Context

I have a tree view with folders (.directory):

When I mouseover on a folder, I show / hide buttons (.delete and .add).

I need to can click on this buttons.

Question

How to let the buttons displayed when I mouseleave .directory?

Code

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

Just try to wrap it

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

Then when hovering directory, it will still be hovered when you hover .delete or .add

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