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.

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.

• javascript
• jquery
• backbone.js
• marionette

3 Answers 3

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

Better to use CSS than JavaScript if you can:

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

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