2021-04-27精灵效果

最新推荐文章于 2024-09-14 17:04:32 发布

离天下之大谱

最新推荐文章于 2024-09-14 17:04:32 发布

阅读量82

点赞数 1

本文链接：https://blog.csdn.net/qq_43679416/article/details/116212112

版权

CSS 精灵图悬停效果背景图片 hover选择器

关键词由CSDN通过智能技术生成

简单精灵效果

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>精灵</title>

<style type="text/css">
a{width: 55px; height: 54px;
display: block;
background-image: url(1.png);
}
a:hover{background-image: url(2.png);}

</style>


</head>
<body>

<a href="#"></a>

</body>
</html>

实现方法：

用a标签实现。

1、设置a标签的宽高为图片分辨率大小，再设置背景图片为图片1.png。
a{width: 55px; height: 54px;
display: block;
background-image: url(1.png);}

因为a标签是内联元素，无法设置宽高，所以用display转换为块元素。

2、用css中的hover选择器（hover选择器：当鼠标放到当前元素上时响应）

对a标签进行图片设置

a:hover{background-image: url(2.png); 这行意思是当鼠标放到a标签时，a标签的背景图片显示为图片2.png