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

更确切地说，我看过的网站中存在一种标题图片，该标题图片会循环浏览3-4个不同的图片，并且每个图片都由一个点引用，您也可以通过单击该点来选择所需的图片。我敢肯定每个人都在某个地方看到过这个。
例如，转到http://www.tsunamitsolutions.com/

我的问题是，当我将鼠标悬停在图片上时（如我在上面共享的网站上），如何使这些点出现/消失？它是JavaScript脚本，还是可以仅使用CSS的“悬停”样式来实现？

换句话说，仅使用CSS就能将鼠标悬停在一个html分区/ div / section上使另一个div / section出现/消失吗？

最佳答案

可以在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方法以使其起作用，即使这些点不是横幅容器的子代也是如此。