Question

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

遗憾的是，无法更改HTML。我还必须使用JS / jQuery。

目前所有图片都显示在悬停状态。显然这是愚蠢的！

希望有道理吗？非常感谢你的帮助！干杯！

的Torsten

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

＆＃13;

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

＆＃13;

.previewBox img {
        display:none;
    }

＆＃13;

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

＆＃13;

Answer 2

可能的解决方案是：

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

但不起作用！

再次感谢，托

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

2 个答案: