我們對於滑鼠經過圖標切換效果這個神奇效果並不陌生，那麼怎麼用代碼實現呢？ html： 圖片： 註意： 1、超鏈接<a>是行內元素，不能直接定義寬度和高度，所以需要使用display:block;將其轉換為塊元素。 2、背景圖像預設相對於盒子的左上角對齊。當滑鼠經過時，需要將背景圖像相對於盒子的底部對 ...
我們對於滑鼠經過圖標切換效果這個神奇效果並不陌生，那麼怎麼用代碼實現呢？
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;。
效果：
滑鼠經過前
滑鼠經過時
