试图在缩略图悬停时显示大图像答案

【问题标题】：Trying to get large image to display when the thumbnail is hovered试图在缩略图悬停时显示大图像
【发布时间】：2017-03-31 02:05:55
【问题描述】：

我正在尝试创建一个缩略图库，一旦将鼠标悬停在缩略图上，它将在单独的框中显示完整大小的版本。

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

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

我做错了什么？

【问题讨论】：

提供代码sn-p
没有代码 sn-p 我认为 g16media zimalks' 和 Ricky 的答案可能是要走的路。查看您的标记并使用 Web Inspector 查看 :hover 上的更改。

标签： html css wordpress image hover

【解决方案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">

将鼠标悬停在缩略图上后，它将在单独的框中显示完整大小的版本。

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

您可以尝试以下方法：

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

【讨论】：