How to show edit action icon when mouse-over on particular text

Question

How to show / hide edit icon on mouseover and mouseout on particular text.

Here is my html code snippet

<ul>
    <li>
        <a id="pop" href="javascript:;;" data-content="test Desc" data-id="123">
            <span class="testNameInfo">Test</span>
        </a>
        <div class="pull-right icons-align">
            <a href="javascript:;;" class="editInline"><i class="fa fa-pencil"></i>..</a>
            <a href="javascript:;;"><i class="fa fa-plus"></i></a>
            <a href="javascript:;;"><i class="fa fa-times"></i></a>
        </div>
    </li>
</ul>

when page loads the fa-pencil icon is in hide state. When i mouse over on text, it should show fa-pencil icon. Remaining icons (add and delete) are always in show state.

Here is my javascript to hide the fa-pencil icon

$("a.editInline").css("display","none");

Am using backbone and marionette js frameworks, so i need to register the events in view.

Please let me know what is the best way to get out from my issue.

Answer 1

You can do as below:

$('.testNameInfo').on('mouseover mouseout',function(){
     $(this).closest('li').find('.editInline').toggle();
     //find the closest li and find its children with class editInLine and 
     //toggle its display using 'toggle()'
});

---

UPDATE

DEMO

@JamieBarker made his point which is valid here so I would suggest to try below code instead

$("a.editInline").css("display","none");
$('li').on('mouseover mouseout',function(){
     $(this).find('.editInline').toggle();
     //find its children with class .editInLine and 
     //toggle its display using 'toggle()'
});

Answer 2

Better to use CSS than JavaScript if you can:

a.editInline {
    display:none;
}
li:hover a.editInline {
    display:inline-block;
}