鼠标经过图标切换效果

  我们对于鼠标经过图标切换效果这个神奇效果并不陌生，那么怎么用代码实现呢？

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;。

效果：

鼠标经过前鼠标经过时

posted @ 2016-06-27 14:40  雅宁  阅读(938)  评论(0)  编辑  收藏  举报