css3 hover 显示隐藏

CSS3的hover（鼠标悬停）可以为网页增添动态的效果。其中一个常用的技术就是来创建隐藏显示的效果：鼠标悬停在某个元素上时，其他的元素会出现或者消失。

设想这个场景：我们想要在网站上添加一些社交媒体的标志，但是又不想影响到页面主体的话题。这时候，我们可以用CSS3来隐藏这些标志，并且仅当用户悬停在某个元素上时才出现。如下代码实现：

/*将包含社交媒体标志图片的元素隐藏*/.social-icons {
      opacity: 0;
      visibility: hidden;
      transition: all ease-in-out .3s;
}
/*当悬停在某个元素上时，包含社交媒体标志图片的元素出现*/.hover-effect:hover .social-icons {
      opacity: 1;
      visibility: visible;
}
    

这段CSS代码中，首先将包含社交媒体标志图片的元素隐藏，并且添加了一个简单的过渡效果；然后在悬停在某个元素时，使用:hover伪类来指定当鼠标悬停在.hove-effect元素上时，.social-icons出现。通过这个效果，我们可以达到在需要的时间增强页面信息的目的。

通过使用CSS3的hover技术，展示隐藏的元素已经变得更加容易。这种方法可以用于很多场景，例如在菜单栏上添加下拉列表、在图片上显示描述等等。只需要将代码细心调整，你可以在你网站上添加令人惊叹的效果吸引你的访客。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！