我们对于鼠标经过图标切换效果这个神奇效果并不陌生，那么怎么用代码实现呢？
html：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>鼠标经过图标切换效果</title> <style type="text/css">
a { display:block; width:67px; height:32px; background:url(images/ico.png) no-repeat; }
a:hover { background-position:bottom; }
</style></head>
<body>
<a href="#"></a>
</body>
</html>
图片：
注意：
1、超链接<a>是行内元素，不能直接定义宽度和高度，所以需要使用display:block;将其转换为块元素。
2、背景图像默认相对于盒子的左上角对齐。当鼠标经过时，需要将背景图像相对于盒子的底部对齐，即使用background-position:bottom;。
效果：
鼠标经过前
鼠标经过时
时间： 2024-10-13 08:28:23