Show icon on mouse over

Tutorials of (Show icon on mouse over) by Juanjo fernandez

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Show icon on mouse over</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <html>
  <head></head>
  <body>
    <table>
      <thead>
        <tr>
          <th>One</th>
          <th>Column Two</th>
          <th>Another One</th>
          <th>Column Four</th>
          <th>Last Column</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Value One</td>
          <td>Value One</td>
          <td>Value One</td>
          <td>Value One</td>
          <td>Value One</td>
        </tr>
        <tr>
          <td>Another Value (Two)</td>
          <td>Another Value (Two)</td>
          <td>Another Value (Two)</td>
          <td>Another Value (Two)</td>
          <td>Another Value (Two)</td>
        </tr>
        <tr>
          <td>Another Three</td>
          <td>Another Three</td>
          <td>Another Three</td>
          <td>Another Three</td>
          <td>Another Three</td>
        </tr>
        <tr>
          <td>Four</td>
          <td>Four</td>
          <td>Four</td>
          <td>Four</td>
          <td>Four</td>
        </tr>
        <tr>
          <td>This is the last column</td>
          <td>This is the last column</td>
          <td>This is the last column</td>
          <td>This is the last column</td>
          <td>This is the last column</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

    <script  src="js/index.js"></script>

</body>
</html>
/* Downloaded from https://www.codeseek.co/ */
table {
  width: 100%;
}
td {
  border: 1px solid #ccc;
  position: relative;
}
.icon {
  background: url('http://docs.oracle.com/cd/E11036_01/alsb30/consolehelp/wwimages/edit_icon.gif');
  position: absolute;
  right: 4px;
  top: 3px;
  width: 16px;
  height: 16px;
  cursor: pointer;
}
/* Downloaded from https://www.codeseek.co/ */
var iconOnClick = function (event) {
  alert($(this).attr('id'));
};
var cellOnMouseOver = function (event) {
  $(this).children('.icon').first().show();
};
var cellOnMouseOut = function (event) {
  $(this).children('.icon').first().hide();
};

$('tbody td:first-child').each(function (key, value) {
  var icon = $('<span />', {
    class: 'icon',
    id: 'icon-' + (key + 1)
  }).hide();
  icon.on('click', iconOnClick);
  $(this).on('mouseover', cellOnMouseOver);
  $(this).on('mouseout', cellOnMouseOut);
  $(this).append(icon);
});

This awesome code ( Show icon on mouse over ) is write by Juanjo Fernandez, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © Juanjo Fernandez