通过悬停来隐藏/取消隐藏HTML部分

hide/unhide HTML portions by hovering?

本文关键字：隐藏 取消 HTML 部分 悬停      更新时间：2023-09-26

更准确地说，我看到过一些网站，那里有一种标题图像，它循环了3-4个不同的图像，每个图像都由一个点引用，你可以通过点击点来选择你想要的图像。我相信每个人都在某个地方见过这个。例如，访问http://www.tsunamitsolutions.com/

我的问题是，我如何使这些点出现/消失，当我悬停在图像上(就像我上面分享的网站)，它是javascript还是可以在CSS中完成"悬停"样式。

换句话说，可以悬停在一个html部分/div/节使另一个div/节出现/消失只是通过使用CSS?

可以在CSS中完成。

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

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

如果你需要像fade:

这样的效果，你也可以在jQuery中这样做
$(".bannerContainerClass").hover(function() {
   $(this).children(".dotClass").fadeIn(500);
}, function() {
   $(this).children(".dotClass").fadeOut(500);
});

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

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

<div id="header_image"> ..code for header image.. </div> 也就是header标签。还有一个包含点的标签

<div id="points_container"> ..code for points... </div>

现在在它的javascript代码中，如果你想在鼠标悬停在"header_image"上时消失"points_container"标签。并在鼠标悬停时再次出现，您可以在其Javascript代码中编写。

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

您可以在悬停时使用css和visibility属性或opacity属性来隐藏对象，但是像这样的图库小部件的完整实现有些复杂。CSS解决方案:

.dots:hover
{
    opacity:0;
}

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

或者如果你不希望它在不可见时占用任何空间:

.dots:hover
{
    display:none;
}

尝试使用简单的CSS过渡，像这样

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

.bullets{
opacity:1;
}
#parent:hover > .bullets{
opacity:0;
transition: opacity .2s ease-out;
-moz-transition: opacity .2s ease-out;
-webkit-transition: opacity .2s ease-out;
-o-transition: opacity .2s ease-out;
}

小提琴这里>>

相关文章：