css鼠标悬浮显示播放图标
时间: 2023-12-13 12:29:19 浏览: 33
可以使用CSS来实现鼠标悬浮显示播放图标的效果。你可以通过设置元素的背景图片或使用伪元素来实现。
1. 使用背景图片:
```css
.play-icon {
background-image: url('play.ico');
background-repeat: no-repeat;
background-position: center;
background-size: contain;
opacity: 0; /* 初始状态隐藏图标 */
transition: opacity 0.3s; /* 添加过渡效果 */
}
.play-icon:hover {
opacity: 1; /* 鼠标悬浮时显示图标 */
}
```
2. 使用伪元素:
```css
.play-icon {
position: relative;
}
.play-icon::after {
content: '';
background-image: url('play.ico');
background-repeat: no-repeat;
background-position: center;
background-size: contain;
opacity: 0; /* 初始状态隐藏图标 */
transition: opacity 0.3s; /* 添加过渡效果 */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.play-icon:hover::after {
opacity: 1; /* 鼠标悬浮时显示图标 */
}
```