我正在尝试一种简单的方法,当您将鼠标悬停在相应的缩略图 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;
}
最佳答案
您的代码存在问题,拇指位于您要显示的图像之后。如果您查找正在使用的选择器,那么您就会明白为什么。
The ~ combinator separates two selectors and matches the second element only if it is preceded by the first, and both share a common parent.
正如您现在看到的,我们可以通过将 .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>
关于javascript - 仅 CSS 将鼠标悬停在缩略图上以显示 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28297344/