[分享]css3控制div显示隐藏div

CSS3是网页设计中的重要一环，除了可以美化网页样式以外，也兼具实用性。其中之一就是可以使用CSS3的选择器控制DIV的显示和隐藏。通过设置display属性的值实现这个功能。.selector1:h...

CSS3是网页设计中的重要一环，除了可以美化网页样式以外，也兼具实用性。其中之一就是可以使用CSS3的选择器控制DIV的显示和隐藏。通过设置display属性的值实现这个功能。

.selector1:hover .selector2 {
  display: block;
}
.selector2 {
  display: none;
} 

在上述代码中，.selector1:hover .selector2表示鼠标悬停在.selector1上时，选择器.selector2的display属性值为block，则.selector2将显示出来。而在.selector2中，display属性值为none，则最开始是隐藏状态。

除了:hover伪类以外，还可以使用:focus、:active、:checked等伪类来实现对DIV的控制。这种方式与JavaScript相比更加简单易懂，同时也不需要考虑兼容性问题。

总之，CSS3控制DIV的显示和隐藏方式简单而实用，在网页设计中也被广泛应用。掌握这种方法可以让网页更加美观，也提升用户体验。