javascript - 使用 jQuery 在悬停时预览图库中的相应图像

Question

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

不幸的是，HTML 无法更改。我还必须使用 JS/jQuery 来完成此操作。

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

希望这是有道理的？非常感谢你的帮助!干杯!

托斯滕

HTML:

<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>

JS:

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

Answer 1

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

})

.previewBox img {
        display:none;
    }

    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

    <!-- hover preview js -->
    <script type="text/javascript" src="hover-preview.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>
</div>
<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>
</div>
<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>