Mouseover effect td with jquery or css

Asked

Viewed 273 times

3

How to do for when I pass the mouse on top of mine td, show the edit icon on it?

Note: My code does not work:

jQuery Event:

$(".editableSpan").mouseover(function(){
    $("#tdEditable").append("<span id='widthSource'></span><span class='glyphicon glyphicon-pencil'></span>");
});

HTML:

<td id="tdEditable" class="editableSpan"><span id="widthSource"></span></td>

I would like that when the event is hover in any td of my table it shows the right-aligned edit icon.

javascript jquery html css front-end

  • I’m not sure I understand the question... is this what you’re looking for? --> http://jsfiddle.net/ndo9psme/

1 answer

3


See if that fits.

$( "td" ).hover(
  function() {
    $( this ).append( $( "<i class='fa fa-pencil'></i>" ) );
  }, function() {
    $( this ).find( ".fa" ).remove();
  }
);
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
.fa{
   float: right;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<table style="width:50%">
  <tr>
    <td>Jill</td>
  </tr>
  <tr>
    <td>Eve</td>
  </tr>
  <tr>
    <td>John</td>
  </tr>
</table>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>

  • 2

    Thanks for the feedback. Great response

Browser other questions tagged javascript jquery html css front-end

You are not signed in. Login or sign up in order to post.