Pure css change Большое изображение при наведении на миниатюры

У меня есть этот 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>

Что я хочу сделать, это изменить основное изображение bacground или src, используя чистый CSS, я знаю, что src нельзя изменить, но есть ли способ, которым я могу изменить большое изображение при наведении миниатюры?

Спасибо!

Источник

2 ответа

Решение

И миниатюры, и основное изображение должны быть родными (или родительскими / дочерними) для работы при наведении курсора.

На основании вашего примера кода я предполагаю thumbnail должно быть ниже, поэтому здесь я расположил их перед main-image в разметке и использовал абсолютный, чтобы переместить их ниже, так что CSS hover будет работать. Вы также можете сделать это с 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>

Источник

Вы можете использовать фоновое изображение. Добавьте три изображения в качестве фонового изображения. Затем наведите курсор на изменение фона.

Источник
Другие вопросы по тегам