Question

我正在尝试获取存储在服务器上的收据的扫描图像，以便在将鼠标悬停在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>

Answer 1

为什么不只使用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>

Answer 2

＆＃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;

你可以尝试这种方法。

Answer 3

<击> 请尝试next（）：

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

<击> 请尝试使用find（）：

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

Answer 4

最近向上移动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();
    });
});

Answer 5

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

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

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

这是在继续使用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;
}

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

5 个答案: