純CSS懸停改變大的圖像在縮略圖

我有這樣的HTML代碼：純CSS懸停改變大的圖像在縮略圖

<div class="main-img"> 
    <img id="main" src="http://i.ebayimg.com/00/s/NjU1WDgwMA==/z/HWIAAOSw8vZXMKGK/$_1.JPG?set_id=880000500F" alt="Teak Cleaner - 1lt bring back the original colour of teak/hardwood - Teak care" class="img-responsive main-image"> 

    <p class="single-thumbnail-p"> 
    <img src="http://i.ebayimg.com/00/s/NjU1WDgwMA==/z/HWIAAOSw8vZXMKGK/$_1.JPG?set_id=880000500F" class="img-responsive thumbnail" alt="Teak Cleaner - 1lt bring back the original colour of teak/hardwood - Teak care" /> 
    <img src="http://i.ebayimg.com/00/s/MTEzMVgxNjAw/z/u8kAAOSw3mpXMKGT/$_1.JPG?set_id=880000500F" class="img-responsive thumbnail" alt="Teak Cleaner - 1lt bring back the original colour of teak/hardwood - Teak care" /> 
    </p> 
</div>

我想要做的使用純CSS是改變主圖像bacground或SRC什麼，我知道，SRC不能改變但是有什麼方法可以在縮略圖懸停的情況下更改大圖？

謝謝！

來源

2017-06-01 Pradeep Srivastava

試試這個[鏈接]（https://stackoverflow.com/questions/27961873/changing-images-on-hover-with-css-html） – Thennarasan

您可以使用CSS背景圖像，但我認爲使用Javascript（或jQuery）更好。 –

使用js我可以做到這一點很容易，但事情是js是不允許的只有html和css –

縮略圖和主圖像都需要兄弟姐妹（或父母/小孩）懸停才能工作。

根據您的示例代碼，我假設thumbnail應該在下面，所以在這裏我將它們定位在標記前的main-image之前，並用絕對值將它們移動到下方，以便CSS懸停將起作用。您還可以使用Flexbox及其訂單屬性來完成此操作，儘管它的瀏覽器支持較少。

.main-img { 
 
    position: relative; 
 
    padding-bottom: 10px; 
 
} 
 
.main-img .thumbnail { 
 
    position: absolute; 
 
    top: 100%; 
 
    width: 100px; 
 
} 
 
.main-img .main-image { 
 
    display: block; 
 
    height: 200px; 
 
} 
 
.main-img .thumbnail + .thumbnail { 
 
    left: 160px; 
 
} 
 
#main2 { 
 
    display: none; 
 
} 
 
.main-img .thumbnail + .thumbnail:hover ~ #main1 { 
 
    display: none; 
 
} 
 
.main-img .thumbnail + .thumbnail:hover ~ #main2 { 
 
    display: block; 
 
}

<div class="main-img"> 
 

 
    <img src="http://i.ebayimg.com/00/s/NjU1WDgwMA==/z/HWIAAOSw8vZXMKGK/$_1.JPG?set_id=880000500F" class="img-responsive thumbnail" alt="Teak Cleaner - 1lt bring back the original colour of teak/hardwood - Teak care" /> 
 
    <img src="http://i.ebayimg.com/00/s/MTEzMVgxNjAw/z/u8kAAOSw3mpXMKGT/$_1.JPG?set_id=880000500F" class="img-responsive thumbnail" alt="Teak Cleaner - 1lt bring back the original colour of teak/hardwood - Teak care" /> 
 

 
    <img id="main1" src="http://i.ebayimg.com/00/s/NjU1WDgwMA==/z/HWIAAOSw8vZXMKGK/$_1.JPG?set_id=880000500F" alt="Teak Cleaner - 1lt bring back the original colour of teak/hardwood - Teak care" class="img-responsive main-image"> 
 

 
    <img id="main2" src="http://i.ebayimg.com/00/s/MTEzMVgxNjAw/z/u8kAAOSw3mpXMKGT/$_1.JPG?set_id=880000500F" alt="Teak Cleaner - 1lt bring back the original colour of teak/hardwood - Teak care" class="img-responsive main-image"> 
 

 
</div>

來源

2017-06-01 11:38:58 LGSon

-1

您可以使用背景圖片。添加上面三張圖片作爲背景圖片，然後懸停改變背景。

來源

2017-06-01 07:34:13

是的，這是我在想什麼，但大圖像背景將如何改變懸停縮略圖，我們將如何知道哪個圖像需要更改爲縮略圖懸停時的大圖像任何線索？ –

純CSS懸停改變大的圖像在縮略圖

回答

相關問題