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

Question

我正在尝试一种使用 CSS 的简单方法，当您将鼠标悬停在相应缩略图 div 上时，仅在元素内显示图像。我认为使用 tildie (~) 定位 thumbnail:hover 范围外的元素会相对容易，因为它们都在父容器中，但它似乎不起作用，我会而不是为此使用 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

实际上，您在这里所做的是完全错误的，因为尽管您有一个 .primary 容器，但您的 img 类应该在图像上。其次，您不能将鼠标悬停在 display: none elements 上。 Display none 从页面中移除元素 visibility: hidden; （元素不可见但仍然存在于结构中）。所以基本上你正在徘徊 .primary.img2:hover 你给了 display: none 并使 .primary.img1 display: none 。不太明白你想要做什么......但我会向你展示一个结构，我希望它能有所帮助。

HTML:

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

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

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

CSS:

.primary .img1 {
  display: block;
}

.primary .img2 {
  display: block;
}

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

.img2:hover .img1 {
  display: block;
}

希望它能以某种方式帮助你...

Answer 2

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

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>

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

CSS-only hover over thumbnail to display div

html

javascript

css

selector