Всем хай. Давненько не писал. Сегодня столкнулся с такой траблой. Не смог логически в голове разложить. Поэтому прошу помощи. Опишу ситуацию в картинках. Так понятнее будет.
Имеем такое дерево...


При наведении на папку мыши -


При нажатии - появляются вложенные папки -


При перемещении по дереву каталога. кнопка(красная) не уходит с первого эл-та


А так же и так появляется


Необходимо. что бы кнопка появлялась только там. где сейчас находится мышь. Кто как думает?


Дабы не было неясностей - html

<li class="directory expanded">
    <a style="float: left;" href="#" rel="one">one</a>
    <img class="delete-img" align="center" src="./public/img/delete.png" style="visibility: hidden; ">
    
    <ul class="jqueryFileTree" style="">
    
        <li class="directory collapsed">
            <a style="float: left;" href="#" rel="two">two</a>
            <img class="delete-img" align="center" src="./public/img/delete.png" style="visibility: hidden; ">
        </li>
        
        <li class="directory collapsed">
            <a style="float: left;" href="#" rel="three">three</a>
            <img class="delete-img" align="center" src="./public/img/delete.png" style="visibility: hidden; ">
        </li>
        
        <li class="directory collapsed">
            <a style="float: left;" href="#" rel="four">four</a>
            <img class="delete-img" align="center" src="./public/img/delete.png" style="visibility: hidden; ">
        </li>
        
        <li class="directory collapsed">
            <a style="float: left;" href="#" rel="five">five</a>
            <img class="delete-img" align="center" src="./public/img/delete.png" style="visibility: hidden; ">
        </li>
        
        <li class="directory collapsed">
            <a style="float: left;" href="#" rel="six">six</a>
            <img class="delete-img" align="center" src="./public/img/delete.png" style="visibility: hidden; ">
        </li>
        
        <li class="directory collapsed">
            <a style="float: left;" href="#" rel="seven">seven</a>
            <img class="delete-img" align="center" src="./public/img/delete.png">
        </li>
        
        <li class="directory collapsed">
            <a style="float: left;" href="#" rel="eight">eight</a>
            <img class="delete-img" align="center" src="./public/img/delete.png">
        </li>
        
        <li class="directory collapsed">
            <a style="float: left;" href="#" rel="nine">nine</a>
            <img class="delete-img" align="center" src="./public/img/delete.png">
        </li>
        
        <li class="directory collapsed">
            <a style="float: left;" href="#" rel="ten">ten</a>
            <img class="delete-img" align="center" src="./public/img/delete.png">
        </li>
        
        <li class="file ext_php">
            <a style="float: left;" href="#" rel="eleven">eleven</a>
            <img class="delete-img" align="center" src="./public/img/delete.png">
        </li>
        
        <li class="file ext_php~">
            <a style="float: left;" href="#" rel="twelve">twelve</a>
            <img class="delete-img" align="center" src="./public/img/delete.png">
        </li>
        
        <li class="file ext_php">
            <a style="float: left;" href="#" rel="thirdteen">thirdteen</a>
            <img class="delete-img" align="center" src="./public/img/delete.png">
        </li>
        
    </ul>
    
</li>

Вот при таком jquery

$(t).find('a').hover(function(){
    $(this).next().css('visibility', 'visible');    
}, function(){
    $(this).next().css('visibility', 'hidden');    
})

все отрабатывает нормально. картинки появляются правильно. но... нажать на нее уже не получится. так как при уходе с "a" на картинки. фокус то теряется. соответственно она пропадает.