Mouseover effect td with jquery or css

Question

Mouseover effect td with jquery or css

Navigation

#1 by (3 votes)

3

How can I make when I hover over my td , display the edit icon in 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 on any td in my table it shows the edit icon aligned to the right.

javascript html jquery css front-end

asked by anonymous 08.10.2015 / 21:48

1 answer

ComboBox in WPF - How to populate using MVVM I believe my error is in arrays, or type conversions, but how to solve?

score 3 · Accepted Answer

See if it does.

$( "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>