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

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

〜combinator分隔两个选择器，只有当第一个元素以第一个元素开头时才匹配第二个元素，并且它们共享一个共同的父元素。

General sibling selectors

因此，您现在可以看到我们可以通过将.thumb放在前面来实现它。（对CSS进行一点改动，所以当我们悬停.thumb时，它会显示新图像。）

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

实际上你在这里做的事情是完全错误的，因为虽然你有一个.primary的容器，你的img clases应该在图像上。其次，你不能将鼠标悬停在display：none元素上。显示无从页面中删除元素，它不像visibility：hidden; （元素不可见，但仍然存在于结构中）。所以基本上你正在徘徊.primary.img2:hover你给了display：none并且使.primary.img1显示：无。不要真正得到你想要的东西......但我会告诉你一个我希望它有帮助的结构。

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

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

CSS只悬停在缩略图上以显示div

2 个答案: