Show icon on mouse over

In this example below you will see how to do a Show icon on mouse over with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by juanjofr, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright juanjofr ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<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/juanjofr/show-icon-on-mouse-over-AaxjB */
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/juanjofr/show-icon-on-mouse-over-AaxjB */
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);
});

Comments