本文介绍如何利用CSS伪元素在鼠标悬停图片时添加背景图片，常见于电影网站，悬停显示播放图标，点击进入详情。通过绝对和相对定位设定图片位置，设置伪元素的display属性控制显示。悬停时，可通过CSS3过渡效果增强视觉体验。
利用伪元素给图片在鼠标悬停的时候添加背景图片，这种效果在电影网站上使用的比较频繁，主要是鼠标悬停的时候显示出播放的图标，点击图片链接后就会进入视频详情页面，而使用伪元素是为了使我们的html代码更加简洁。
要点：
1.需要使用绝对定位和相对定位，确定背景图片的位置,父级盒子设置为绝对定位，伪元素背景图片设置为相对定位。
2.背景图片的宽高要和父级盒子的宽高一致。
3.背景图片在默认情况下不显示，需要用display属性将其设置为none，当鼠标悬停的时候再让其显示出来，鼠标悬停时将其display属性设置为block。
以下是利用伪元素给图片在鼠标悬停的时候添加背景图片的详细代码：
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content
最低0.47元/天 解锁文章
扫一扫
21
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
