鼠标经过图标切换效果
Posted 雅宁
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了鼠标经过图标切换效果相关的知识，希望对你有一定的参考价值。
我们对于鼠标经过图标切换效果这个神奇效果并不陌生，那么怎么用代码实现呢？
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;。
效果：
鼠标经过前
鼠标经过时
以上是关于鼠标经过图标切换效果的主要内容，如果未能解决你的问题，请参考以下文章