纯css更改悬停在缩略图上的大图像答案

【问题标题】：Pure css change Big image on hover over thumbnails纯css更改悬停在缩略图上的大图像
【发布时间】：2017-06-01 19:38:58
【问题描述】：

我有这个 html 代码：

<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 无法更改，但是有什么方法可以在缩略图悬停时更改大图像？

谢谢！

【问题讨论】：

试试这个link
您可以使用 CSS 背景图片，但我认为使用 Javascript（或 jQuery）更好。
使用 js 我可以很容易地做到这一点，但问题是 js 不能只允许 html 和 css
让我知道我的答案是否有效并且可以被接受，否则我将其删除。
感谢不是一个理想的，因为它改变了 html 结构，但我认为它会帮助我和很多其他人:)

标签： html css pure-css

【解决方案1】：

缩略图和主图像都需要是兄弟姐妹（或父/子）才能使悬停工作。

根据您的示例代码，我假设 thumbnail 应该在下方，所以在这里我将它们定位在标记中的 main-image 之前，并使用绝对将它们移动到下方，因此 CSS 悬停将起作用。您也可以使用 Flexbox 及其 order 属性来执行此操作，尽管它对浏览器的支持较少。

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

【讨论】：

【解决方案2】：

您可以使用背景图片。将以上三张图片添加为背景图片。然后在悬停时更改背景。

【讨论】：

是的，我就是这么想的，但是大图像背景将如何在缩略图悬停时更改以及我们如何知道哪个图像需要在缩略图悬停时更改为大图像任何线索？