[分享]css3放上显示离开隐藏

CSS3中有一种非常方便的功能，让元素在鼠标放上去时显示，离开时隐藏。这种功能可以通过:hover和display属性来实现。/ 隐藏元素 / .hide { display: none; } / 鼠...

CSS3中有一种非常方便的功能，让元素在鼠标放上去时显示，离开时隐藏。这种功能可以通过:hover和display属性来实现。

/* 隐藏元素 */
.hide {
  display: none;
}

/* 鼠标放上去时显示 */
.show:hover .hide {
  display: block;
} 

上面的代码中，我们给一个隐藏元素定义了一个class名叫hide，然后通过display: none来实现隐藏。接着定义了一个包含hide元素的父元素，class名叫show。在show元素的:hover状态下，我们使用了选择器.show:hover .hide来实现了鼠标放上去时让hide元素显示出来的效果。

这种方法除了可以用于隐藏元素，也可以用于给元素添加鼠标放上去的特效，例如下划线、背景色等等。

/* 鼠标放上去时下划线变粗 */
a:hover {
  text-decoration: underline double;
}

/* 鼠标放上去时背景色改变 */
.btn:hover {
  background-color: #f2f2f2;
} 

使用这种方法时需要注意，当隐藏元素内部有内容时，这些内容也会被隐藏。如果想让其中的某些部分一直显示，可以使用position: absolute来实现。

/* 隐藏元素 */
.hide {
  position: absolute;
  left: -9999px;
}

/* 鼠标放上去时显示其中的某些部分 */
.show:hover .part {
  position: relative;
  left: 0;
} 

除此之外，还有其他一些用于隐藏/显示元素的方法，例如opacity、visibility等等，大家可以根据具体需求选择不同的方法来实现特定的效果。