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.

Preform

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

Escape

Or alternatively just add the listener to the li – Waldenses

@JamieBarker If listener is added to li then on hover of any child of li the edit icon will showup which is not what OP wants. So target the proper element and toggle its state.. :) – Escape

It's stupid though. Just imagine it working! You hover over the text and you see an icon appear, excellent. You go over to click the icon, but oops, it disappeared! Because you're not hovering on the text any more... – Waldenses

@JamieBarker Good point to note!! In that case OP has to change structure to a quite different one like Place the icon inside .pop and add listener to .pop.. Sounds crazy though!! – Escape

Anytime.. Happy Coding.. :) – Escape

Answer 2

UPDATE

Performance/Simplicity wise I'd advise going with the CSS solution provided. If all else you can use then JS solution.

Optional CSS Solution

.editInline {
  display: none;
}

#pop:hover .icons-align .editInline {
 display: inline-block;
}

JS Solution

$(function() {
  $(".editInline").hide(); // Use this if CSS is not wanted

  $("#pop").hover(function() {
    $(".editInline").show();
  }, function() {
    $(".editInline").hide();
  });
});  

Delao

Answer 3

Better to use CSS than JavaScript if you can:

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

Waldenses