[分享]css3悬浮上去隐藏小图标

在CSS3中，我们可以利用:hover伪类实现鼠标悬浮时隐藏小图标的效果，而不需要再借助JavaScript等脚本语言。 首先，我们需要在HTML中定义一个包含小图标和文本的区块，如下所示： Som...

在CSS3中，我们可以利用:hover伪类实现鼠标悬浮时隐藏小图标的效果，而不需要再借助JavaScript等脚本语言。
首先，我们需要在HTML中定义一个包含小图标和文本的区块，如下所示：

Some Text

其中，i标签用于定义小图标，class属性用于设置样式。
接下来，我们可以使用CSS3的opacity属性将小图标设置为透明，并利用:hover伪类将其透明度设置为1，从而实现悬浮时图标的显隐效果。同时，可以使用transition属性设置动画过渡时间。
代码如下：

.icon {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}
<br>
.icon:hover {
  opacity: 1;
}
<br>
.icon-text {
  position: relative;
}
<br>
.icon-text:hover::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  background: #333;
  border-radius: 50%;
  opacity: 0.5;
} 

在上述代码中，我们还使用了伪元素::before来创建一个黑色半透明的圆形背景，以增强效果。
实际应用中，我们可以根据需求调整图标的大小、位置、颜色等属性，达到更加满意的效果。