Javascript 使用jQuery悬停在gallery中预览相应的图像

我有几个图像，当我把鼠标悬停在其中一个图标上时，我只想将相应的图像显示为一种预览，它隐藏在CSS中

很遗憾，HTML无法更改。我还必须使用JS/jQuery来实现这一点

目前，所有图像都显示在悬停状态。显然那是愚蠢的

希望这有意义？非常感谢你的帮助！干杯

托尔斯滕

HTML:

$（函数（）{
$（'.cell'）.hover（函数（）{
$（this）.同级（'.previewBox'）.find（'img'）.fadeToggle（“快速”，“线性”）；
});
})

.previewBox img{
显示：无；
}

（1212KB）
（900 KB）
（1500 KB）

只要所有“previewBox”元素的类都相同，只要触发淡入淡出动画，这些元素就会显示出来。您需要给它们指定特定的类名，或者将它们放在hover元素中。谢谢Himmel，这也是我的想法，但不幸的是，我无法更改html。然而，剧本会是什么样子呢？干杯，请注意Html中也有变化，并且添加的代码片段没有hover js cdn，所以只显示预览divoops对不起，你说得对，它确实有效！谢谢！

<style type="text/css">
.previewBox img {
    display:none;
}
</style>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<div>
<span class="cell name">
    <img class="downloadIcon" src="1s.jpg" alt="Download">
    <a class="download-a" href="#">Test1</a>
</span>
<span class="cell size">(1212 KB)</span>
<div class="previewBox">
    <img src='1.jpg'>
</div>

<span class="cell name">
    <img class="downloadIcon" src="2s.jpg" alt="Download">
    <a class="download-a" href="#">Test2</a>
</span>
<span class="cell size">(900 KB)</span>
<div class="previewBox">
    <img src='2.jpg'>
</div>

<span class="cell name">
    <img class="downloadIcon" src="3s.jpg" alt="Download">
    <a class="download-a" href="#">Test3</a>
</span>
<span class="cell size">(1500 KB)</span>
<div class="previewBox">
    <img src='3.jpg'>
</div>
</div>

<!-- hover preview js -->
<script type="text/javascript" src="hover-preview.js"></script>

$('.cell').hover(function() {
    $('.previewBox img').fadeToggle("fast", "linear");
});