Question

我有这个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无法更改但是有没有办法可以在缩略图悬停时更改大图像？

谢谢！

Answer 1

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

根据您的示例代码，我假设thumbnail应该在下面，所以我在这里将它们放在标记中的main-image之前，并使用absolute将它们移到下面，所以CSS悬停会起作用。您也可以使用Flexbox及其订单属性执行此操作，但浏览器支持较少。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

纯css改变悬停在缩略图上的大图像

2 个答案: