在網(wǎng)站的若干特效中，好多js動(dòng)態(tài)效果都讓開發(fā)者望洋心嘆，其實(shí)一些漂亮的效果也不一定都是js編程的，而是今天所說的鼠標(biāo)經(jīng)過后替換背景圖片，不要小看該功能，真所謂小不點(diǎn)大能耐，靈活運(yùn)用它，會(huì)給你帶來意想不到的結(jié)果。
先來說說功能怎么實(shí)現(xiàn),先上代碼：
<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="#">經(jīng)過后會(huì)替換背景哦</a></td>
</tr>
</table>
很顯然，上面就是利用a的hover選擇器樣式，利用鼠標(biāo)經(jīng)過鏈接時(shí)，改變a的樣式來實(shí)現(xiàn)的，代碼其實(shí)是級(jí)簡單的，在a樣式里，定義了文字顏色，字體大小，行距，而當(dāng)鼠標(biāo)經(jīng)過時(shí)，加個(gè)背景圖片，由于是選擇器，會(huì)繼承上面的屬性，因而除了要改變的樣式之外，其實(shí)都不要?jiǎng)樱紩?huì)完整的繼承下來的，上面的代碼中，當(dāng)鼠標(biāo)經(jīng)過時(shí)，只有背景圖片與文字顏色發(fā)生改變，因而就直接定義這兩樣就行了，就這樣簡單。
那如何靈活運(yùn)用呢？
不知道大家有沒有看到這樣的效果，當(dāng)鼠標(biāo)經(jīng)過某個(gè)圖片，或是某個(gè)文字，或是某段區(qū)域時(shí)，這段區(qū)域的背景突然形成了立體的效果，或是變了顏色，同時(shí)前端的文字大小與顏色也會(huì)發(fā)生改變，其實(shí)就是使用的鼠標(biāo)經(jīng)過后改變背景圖片的樣式，這個(gè)區(qū)域加個(gè)鏈接，采用a:hover實(shí)現(xiàn)。
從上面的想法對于靈活運(yùn)用進(jìn)行擴(kuò)展下去，凡是鼠標(biāo)經(jīng)過的效果，在實(shí)際的網(wǎng)站建設(shè)過程中，都要留意一下，能不能利用a:hover來實(shí)現(xiàn)，因?yàn)槔盟瑢?shí)在是太簡單了，代碼又少，又節(jié)省時(shí)間，只是要辛苦美工一下，把背景圖片p得好看一點(diǎn)。
