[分享]css3实现鼠标滑过显示

CSS3在网页设计中给设计师提供了更多的创作空间，其中实现鼠标滑过显示效果是比较常见的一种效果。下面我们来介绍一下如何通过CSS3实现这种效果。/CSS3实现鼠标滑过显示效果/ .box { widt...

CSS3在网页设计中给设计师提供了更多的创作空间，其中实现鼠标滑过显示效果是比较常见的一种效果。下面我们来介绍一下如何通过CSS3实现这种效果。

/*CSS3实现鼠标滑过显示效果*/
.box {
  width: 200px;
  height: 200px;
  background: #ccc;
  position: relative;
}
.box .text {
  width: 200px;
  height: 200px;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;   /*文本初始状态为透明*/
  background: rgba(0, 0, 0, 0.5);   /*设置背景颜色及透明度*/
  color: #fff;
  font-size: 20px;
  text-align: center;
  padding-top: 80px;
  transition: opacity 0.3s ease-in-out;   /*设置过渡效果*/
}
.box:hover .text {
  opacity: 1;   /*鼠标滑过时将文本显示出来*/
} 

首先我们需要定义一个容器元素，这里我们使用一个类名为box的div元素作为容器，并设置其宽度、高度及背景颜色。在容器元素内部，我们再添加一个类名为text的div元素作为文本容器，并设置其宽度、高度、位置及初始状态的透明度。然后，我们利用CSS3的过渡效果，在鼠标滑过时将文本的透明度从0变成1，来实现文本显示的效果。

通过上述代码，我们就可以通过CSS3实现一个简单的鼠标滑过显示效果的效果。