纯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悬停改变大的图像在缩略图

回答

相关问题