我正在尝试获取存储在服务器上的收据的扫描图像,以便在将鼠标悬停在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>
答案 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)
$(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;
你可以尝试这种方法。
答案 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
属性初始值为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;
}