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。

＆＃13;

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

＆＃13;

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

＆＃13;

缩略图悬停在其上方后，会在单独的框中显示完整尺寸的版本。

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

您可以尝试以下操作：

＆＃13;

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

＆＃13;

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

＆＃13;

使用该标记，您可以实现以下目标：

＆＃13;

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

＆＃13;

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

＆＃13;

当缩略图悬停时，尝试显示大图像

1 个答案: