在網站的若干特效中，好多js動態效果都讓開發者望洋心嘆，其實一些漂亮的效果也不一定都是js編程的，而是今天所說的鼠標經過后替換背景圖片，不要小看該功能，真所謂小不點大能耐，靈活運用它，會給你帶來意想不到的結果。
先來說說功能怎么實現,先上代碼：
<style>
.dttt a{color:#666666; font-size:13px; display:block; line-height:49px;}
.dttt a:hover{color:#003399; background:url(img/li_2.jpg) no-repeat;}
</style>
<table width="207" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center" height="49" class="dttt"><a href="#">經過后會替換背景哦</a></td>
</tr>
</table>
很顯然，上面就是利用a的hover選擇器樣式，利用鼠標經過鏈接時，改變a的樣式來實現的，代碼其實是級簡單的，在a樣式里，定義了文字顏色，字體大小，行距，而當鼠標經過時，加個背景圖片，由于是選擇器，會繼承上面的屬性，因而除了要改變的樣式之外，其實都不要動，都會完整的繼承下來的，上面的代碼中，當鼠標經過時，只有背景圖片與文字顏色發生改變，因而就直接定義這兩樣就行了，就這樣簡單。
那如何靈活運用呢？
不知道大家有沒有看到這樣的效果，當鼠標經過某個圖片，或是某個文字，或是某段區域時，這段區域的背景突然形成了立體的效果，或是變了顏色，同時前端的文字大小與顏色也會發生改變，其實就是使用的鼠標經過后改變背景圖片的樣式，這個區域加個鏈接，采用a:hover實現。
從上面的想法對于靈活運用進行擴展下去，凡是鼠標經過的效果，在實際的網站建設過程中，都要留意一下，能不能利用a:hover來實現，因為利用它，實在是太簡單了，代碼又少，又節省時間，只是要辛苦美工一下，把背景圖片p得好看一點。
