javascript - Show image on link hover inside of table - Stack Overflow

I'm trying to get a scanned image of a receipt stored on the server to display after hovering on a link inside of a table. I'm not sure what I am doing wrong but was curious if someone could point me in the right direction.

Here is what I have so far

CODE

 jQuery(document).ready(function() {
   $(".preview").hover(function() {
     $(this).closest('img').show();
   }, function() {
     $(this).closest('img').hide();
   });
 });

 .hide-image {
   display: none;
 }

<script src=".11.1/jquery.min.js"></script>
<tr>
  <td>01/14/16</td>
  <td>
    <a href="#" class="preview">Lowes Receipt
          <img src="image-path/image.jpg" class="hide-image" style="z-index: 100; position: absolute;" /></a>
  </td>
  <td>$1235.96</td>
</tr>

I'm trying to get a scanned image of a receipt stored on the server to display after hovering on a link inside of a table. I'm not sure what I am doing wrong but was curious if someone could point me in the right direction.

Here is what I have so far

CODE

 jQuery(document).ready(function() {
   $(".preview").hover(function() {
     $(this).closest('img').show();
   }, function() {
     $(this).closest('img').hide();
   });
 });

 .hide-image {
   display: none;
 }

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<tr>
  <td>01/14/16</td>
  <td>
    <a href="#" class="preview">Lowes Receipt
          <img src="image-path/image.jpg" class="hide-image" style="z-index: 100; position: absolute;" /></a>
  </td>
  <td>$1235.96</td>
</tr>

• javascript
• jquery
• html
• css

5 Answers 5

Why not only use CSS for this simple task?

.hide-image {
  display: none;
  z-index: 100;
  position: absolute;
}
.preview:hover .hide-image {
  display: block
}

<tr>
  <td>01/14/16</td>
  <td>
    <a href="#" class="preview">Lowes Receipt
      <img src="//lorempixel./100/100" class="hide-image" /></a>
  </td>
  <td>$1235.96</td>
</tr>

$(document).ready(function() {
  $(".preview").hover(function() {
    $(this).find('img').fadeIn();
  }, function() {
    $(this).find('img').fadeOut();
  });
});

.hide-image {
  display: none;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<tr>
  <td>01/14/16</td>
  <td>
    <a href="#" class="preview">Lowes Receipt
    <img src="https://via.placeholder./100" class="hide-image" style="z-index: 100; position: absolute;" />
    </a>
  </td>
  <td>$1235.96</td>
</tr>

You can try this method.

Try next() instead:

$(this).next('img').show();

Try find() instead:

$(this).find('img').show();

Closest moves up the DOM. I have made this mistake before. Use find("img");

Here is a fiddle: https://jsfiddle/unix102/yspbrwkd/

$(document).ready(function () {
    $(".preview").hover(function(){
        $(this).find('img').fadeIn();
     }, function(){
        $(this).find('img').fadeOut();
    });
});

The problem seems to be based on how jQuery's .show() works.

The matched elements will be revealed immediately, with no animation. This is roughly equivalent to calling .css( "display", "block"), except that the display property is restored to whatever it was initially.

Since the display properties initial value is none, show() does nothing.

Here is another way to achieve the same thing while continuing to use jQuery. I also moved some inline styling into the css, for better practice:

HTML

<tr>
   <td>01/14/16</td>
   <td>
      <a href="#" class="preview">Lowes Receipt
      <img src="image-path/image.jpg" class="receipt-image" /></a>
   </td>
   <td>$1235.96</td>
</tr>

CSS

.receipt-image {
    display: none;
    position: absolute;
    z-index: 100; 
}
.receipt-image.visible { 
    display: block;
}

Javascript

jQuery(document).ready(function () {
    $(".preview").hover(function(){
        $(this).closest('.receipt-image').addClass('visible');
    }, function(){
        $(this).closest('.receipt-image').removeClass('visible');
    });
});

However, it's also possible to do this entirely with CSS, no jQuery or Javascript required! Simply remove the JS, and try out this CSS:

CSS

.receipt-image {
    display: none;
    position: absolute;
    z-index: 100; 
}
.preview:hover .receipt-image { 
    display: block;
}