javascript - 仅 CSS 将鼠标悬停在缩略图上以显示 div

Question

我正在尝试一种简单的方法，当您将鼠标悬停在相应的缩略图 div 上时，使用 CSS 仅在元素中显示图像。我认为使用 tildie (~) 定位缩略图之外的元素会相对容易:悬停范围，因为它们都在父容器中，但它似乎不起作用，我宁愿不为此使用 Javascript，但如果这不可能，那就这样吧，只是想看看其他人对此有何意见，也许它可以帮助将来的人。

HTML

<div class="container">
  <!-- Main images -->
  <div class="primary img1">
    <img src="myimage.jpg" />
  </div>

  <div class="primary img2">
    <img src="myimage2.jpg" />
  </div>

  <!-- Thumbnails -->
  <div class="thumb img2">
    <img src="myimage2.jpg" />
  </div>
</div>

CSS

.primary.img1 {
  display: block;
}

.primary.img2 {
  display: none;
}

.primary.img2:hover, .primary.img1 {
  display: none;
}

.primary.img2:hover, .primary.img2 {
  display: block;
}

Answer 1

您的代码存在问题，拇指位于您要显示的图像之后。如果您查找正在使用的选择器，那么您就会明白为什么。

The ~ combinator separates two selectors and matches the second element only if it is preceded by the first, and both share a common parent.

General sibling selectors

正如您现在看到的，我们可以通过将 .thumb 放在前面来让它工作。 (对 CSS 稍作改动，当我们将鼠标悬停在 .thumb 上时，它会显示新图像。)

.primary.img1 {
  display: block;
}
.primary.img2 {
  display: none;
}
.thumb.img2:hover ~ .primary.img1 {
  display: none;
}
.thumb.img2:hover ~ .primary.img2 {
  display: block;
}

<div class="container">

  <!-- Thumbnails -->
  <div class="thumb img2">
    <img src="http://placehold.it/350x150" />
  </div>

  <!-- Main images -->
  <div class="primary img1">
    <img src="http://placehold.it/351x150" />
  </div>
  <div class="primary img2">
    <img src="http://placehold.it/352x150" />
  </div>
</div>