javascript - 通过悬停隐藏/取消隐藏 HTML 部分？

Question

更准确地说，我看到有一种标题图片的网站，它循环显示 3-4 张不同的图片，每张图片都由一个点引用，您可以通过单击该点来选择您想要的图片出色地。我相信每个人都在某个地方看到过这个。 例如，转到 http://www.tsunamitsolutions.com/

我的问题是，当我将鼠标悬停在图像上时(就像在我上面分享的网站上一样)，我如何使这些点出现/消失是 javascript 还是可以仅在具有“悬停”样式的 CSS 中完成。

换句话说，仅通过使用 CSS，是否可以将鼠标悬停在一个 html 部分/div/部分上使另一个 div/部分出现/消失？

Answer 1

它可以在 CSS 中完成。

假设点/箭头是横幅容器的子元素，您可以这样做:

.bannerContainerClass .dotClass {
   display: none;
}

.bannerContainerClass:hover .dotClass {
   display: block;
}

如果您需要像淡入淡出这样的效果，您也可以在 jQuery 中完成:

$(".bannerContainerClass").hover(function() {
   $(this).children(".dotClass").fadeIn(500);
}, function() {
   $(this).children(".dotClass").fadeOut(500);
});

即使点不是横幅容器的子元素，也可以修改 jQuery 方法。