在链接上显示图像悬停在表格内

时间:2016-01-26 01:15:57

标签: javascript jquery html css

我正在尝试获取存储在服务器上的收据的扫描图像,以便在将鼠标悬停在table内的链接上后显示。我不确定我做错了什么,但如果有人能指出我正确的方向,我很好奇。

这是我到目前为止所拥有的

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.com/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>

5 个答案:

答案 0 :(得分:4)

为什么不只使用CSS来完成这个简单的任务呢?

.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.com/100/100" class="hide-image" /></a>
  </td>
  <td>$1235.96</td>
</tr>

答案 1 :(得分:2)

&#13;
&#13;
$(document).ready(function () {
    $(".preview").hover(function(){
        $(this).find('img').fadeIn();
     }, function(){
        $(this).find('img').fadeOut();
    });
});
&#13;
 .hide-image {
   display: none;
 }
&#13;
<script src="https://ajax.googleapis.com/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="//lorempixel.com/100/100" class="hide-image" style="z-index: 100; position: absolute;" /></a>
  </td>
  <td>$1235.96</td>
</tr>
&#13;
&#13;
&#13;

你可以尝试这种方法。

答案 2 :(得分:1)

<击> 请尝试next():

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

<击> 请尝试使用find():

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

答案 3 :(得分:1)

最近向上移动DOM。我之前犯了这个错误。使用find(&#34; img&#34;);

这是一个小提琴:https://jsfiddle.net/unix102/yspbrwkd/

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

答案 4 :(得分:0)

问题似乎是基于jQuery&#39;} .show()的工作原理。

  

匹配的元素将立即显示,没有动画。这大致相当于调用.css( "display", "block"),除了display属性恢复到最初的状态。

由于display属性初始值为noneshow()不执行任何操作。

这是在继续使用jQuery的同时实现同样的事情的另一种方法。我还将一些内联样式转移到了css中,以便更好地练习:

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');
    });
});

但是,它也可以完全用CSS完成,不需要jQuery或Javascript!只需删除JS,然后试用这个CSS:

CSS

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