使用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預覽圖片庫中的相應圖片

回答

相關問題