[分享]css3实现鼠标经过显示文字

CSS3可以实现很多动态效果，其中一种就是鼠标经过显示文字的效果。在CSS3中，我们可以使用:hover伪类来实现这一效果。/ 定义需要显示的文字样式 / .text { opacity: 0; /字...

CSS3可以实现很多动态效果，其中一种就是鼠标经过显示文字的效果。在CSS3中，我们可以使用:hover伪类来实现这一效果。

/* 定义需要显示的文字样式 */
.text {
  opacity: 0; /*字体不透明度为0*/
  position: absolute; /*绝对定位*/
  top: 0; /*距离顶部0*/
  left: 0; /*距离左侧0*/
  transition: all 0.3s ease-in-out; /*过渡时间0.3s*/
  z-index: -1; /*隐藏*/
}

/* 鼠标经过的元素 */
.hover-element:hover .text {
  opacity: 1; /*将字体不透明度设为1，即可显示出来 */
  z-index: 1; /*不隐藏*/
} 

以上就是实现鼠标经过显示文字的CSS3代码。使用:hover伪类，当鼠标经过.hover-element元素时，.text元素将显示出来，并可以指定文字的样式和位置。