使用jQuery预览图片库中的相应图片

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

不幸的是，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"); 
});

来源

2015-07-18 Torsten

只要你所有的“previewBox”元素的类都是一样的，任何时候你触发动画渐变，这些元素会显示。您需要给他们特定的类名称或将其放在悬停元素中。 – Himmel

感谢Himmel，我认为也是，但不幸的是我无法更改html。但是，剧本会如何？干杯T – Torsten

可能的解决办法是：

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

但不工作！

再次感谢，托斯滕

来源

2015-07-18 20:38:32 Torsten

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

来源

2015-07-18 20:53:51 vinayakj

感谢男人，但不工作不幸:-( – Torsten

请注意Html也有变化，并添加片段没有悬停js cdn所以只显示预览div – vinayakj

哎呀抱歉，你是对的，它确实工作！谢谢你很多！ – Torsten

使用jQuery预览图片库中的相应图片

回答

相关问题