html - 试图在缩略图悬停时显示大图像

Question

我正在尝试创建缩略图库，将鼠标悬停在缩略图上后，它会在单独的框中显示完整尺寸的版本。

现在的问题是，当鼠标悬停在相应的缩略图上时，我根本无法显示图像。

这是 HTML:

<img class="thumb1" src="image.jpg">

而实际的全尺寸图像在另一个部分:

<img class="fullsize1" src="image.jpg>

这是 CSS，但它不起作用:

img.fullsize1 { display:none; }
img.thumb1:hover + img.fullsize1 {display:block;}

我做错了什么？

Answer 1

确保你的大 <img>直接跟随标记中的缩略图。

+代表 adjacent sibling selector .

img.fullsize1 {
  display: none;
}
img.thumb1:hover + img.fullsize1 {
  display: block;
}

<img class="thumb1" src="http://placehold.it/50x50">
<img class="fullsize1" src="http://placehold.it/100x100">

---

once the thumbnail is hovered over it will display the full size version in a seperate box.

要实现这一点，取决于标记的呈现方式。

您可以尝试以下方法:

.box {
  background-color: purple;
  margin: 1em;
  text-align: center;
}
.box img {
  vertical-align: middle;
}
.fullsize {
  display: none;
}
.box--thumb:hover + .box--fullsize > .fullsize {
  display: initial;
}

<div class="box box--thumb">
  <img class="thumb" src="http://placehold.it/50x50">
</div>
<div class="box box--fullsize">
  <img class="fullsize" src="http://placehold.it/100x100">
</div>

---

使用该标记，您可以实现如下目的:

body {
  margin: 0;
}
.gallery {
  height: 100vh;
  background-color: coral;
  position: relative;
}
.gallery__item--fullsize {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 80px;
  visibility: hidden;
}
.gallery__item--fullsize > img {
  width: 100%;
  height: 100%;
}
.gallery__item--thumb {
  position: absolute;
  left: 1em;
  bottom: 0;
}
.gallery__item--thumb:nth-child(3) {
  left: 50%;
  transform: translateX(-50%);
}
.gallery__item--thumb:nth-child(5) {
  left: initial;
  right: 1em;
}
.gallery__item--thumb:hover + .gallery__item--fullsize {
  visibility: visible;
}

<div class="gallery">
  <div class="gallery__item gallery__item--thumb">
    <img src="http://placehold.it/50x50">
  </div>
  <div class="gallery__item gallery__item--fullsize">
    <img src="http://placehold.it/1000x500?text=1">
  </div>
  <div class="gallery__item gallery__item--thumb">
    <img src="http://placehold.it/50x50">
  </div>
  <div class="gallery__item gallery__item--fullsize">
    <img src="http://placehold.it/1000x500?text=2">
  </div>
  <div class="gallery__item gallery__item--thumb">
    <img src="http://placehold.it/50x50">
  </div>
  <div class="gallery__item gallery__item--fullsize">
    <img src="http://placehold.it/1000x500?text=3">
  </div>
</div>