Javascript 是否通过悬停隐藏/取消隐藏HTML部分？

更准确地说，我见过一些网站，其中有一种标题图像，它在3-4个不同的图像中循环，每个图像都有一个点，你也可以通过点击这个点来选择你想要的图像。我相信每个人都在某处见过。 例如，请转到

我的问题是，当我将鼠标悬停在图像上（就像我在上面分享的网站上一样）时，如何使这些点出现/消失？是javascript还是仅在CSS中使用“hover”样式就可以实现这一点

---

换句话说，仅仅通过使用CSS，悬停在一个html部分/div/section上是否可以使另一个div/section显示/消失？

您可以使用带有可见性属性或不透明度属性的CSS悬停来隐藏对象，但这样的gallery小部件的完整实现有些复杂。CSS解决方案：

.dots:hover
{
    opacity:0;
}

在鼠标悬停时使任何带有dots类的内容不可见

或者，如果您不希望它在不可见时占用任何空间：

.dots:hover
{
    display:none;
}

---

这可以在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方法也可以修改为有效。

使用简单的CSS转换尝试此方法，如下所示

HTML

<div id="parent"><br/><span class="bullets">* * * *</span></div>

---

您可以使用Jquery和javascript完成它。在任何网站标题图像中，都有一个用于图像的标签，一个用于收集这些点的标签。 假设

..标题图像的代码。。

这是标题标签。还有一个标签，它代表了这些观点

…积分代码。。。

现在在它的javascript代码中，如果您想在鼠标悬停在“header\u image”上时消失“points\u container”标记，并在鼠标悬停在“header\u image”上时再次出现，您可以编写它的javascript代码

$(document).ready(function(){
$("#header_image").hover(function(){
$("#points_container").hide();
},function(){
$("points_container").show();
});
});

---

这可以通过任何一种方式完成，我会尝试为您获取CSS答案。您有当前滑块的示例吗？嗨，对不起，没有，我自己还没有尝试过，因为我不确定如何实现它

#sliderContainer#buttonContainer{display:none；}

#sliderContainer:hover#buttonContainer{display:block；}啊，我喜欢它，非常感谢！更多信息，请参见本文。我明白了，谢谢。因此，如果任何内容不是同一容器的子容器，则需要Javascript？请注意，

display:none

会压缩空间。如果您使用

opacity:0

您就不会有这个问题。@AbdulAhmad:是的，但更准确地说，元素必须是悬停容器的“后代”（否则您就不能用CSS选择它）。不必是直接的孩子谢谢Casey。我应该澄清一下。但这是在修改悬停在右边的元素？我想通过将鼠标悬停在该元素上来修改/显示另一个元素不必要的转换？@CaseyFalk此元素中不必要的是什么？“转换”-目前占代码的40%。他们很好，但把答案的“肉”弄得乱七八糟@CaseyFalk，但他的参考网站已经得到了淡出效果，他希望这与使用纯css有关。我认为OP的问题只是问如何“通过悬停隐藏/取消隐藏HTML部分”，而不是如何“淡入/淡出”元素；但是，很公平。取决于OP对“示例”的定义（我猜是这样的）试着读一读OP的问题，朋友“换句话说，仅仅通过使用CSS，将鼠标悬停在一个html部分/div/section上可以使另一个div/section出现/消失吗？”抱歉！！不知道如何在CSS中做到这一点：（不要抱歉；只是不要把OP的问题弄得一团糟，巴德。他不是在要求其他选择。）

$(document).ready(function(){
$("#header_image").hover(function(){
$("#points_container").hide();
},function(){
$("points_container").show();
});
});