學(xué)生在完成網(wǎng)頁設(shè)計作業(yè)時，有的時候想加入一些鼠標(biāo)經(jīng)過的交互效果，比如實現(xiàn)鼠標(biāo)經(jīng)過變換圖片，這里STU-WORKS.COM為大家分享三種簡單實現(xiàn)鼠標(biāo)經(jīng)過變換圖片的方法。

onMouseOver和onMouseOut事件

onMouseOver 屬性是鼠標(biāo)指針移動到元素上時觸發(fā)的，onMouseOut屬性是鼠標(biāo)指針移出元素是觸發(fā)的。

html代碼示例：

<img alt="" src="images/1.jpg" onMouseOver="this.src='images/1.png'" onMouseOut="this.src='images/1.jpg'">

鼠標(biāo)經(jīng)過background背景圖片改變

html代碼示例：

<div id="banner"></div>

css代碼示例：

#banner{width: 1200px;height: 380px;background: url(../images/1.jpg);}
#banner:hover{background: url(../images/1.png);

 如果你為了方便點擊可以用a鏈接，但是記得把a標(biāo)簽轉(zhuǎn)換為塊級標(biāo)簽，定義它的寬度高度。鼠標(biāo)經(jīng)過時改變a標(biāo)簽的背景圖片就可以達(dá)到目的。

利用opacity透明屬性

先用position定位，把替換的圖片定位在div中和原來img圖片重合的地方，然后把替換的圖片設(shè)置成透明，到鼠標(biāo)經(jīng)過的時候把透明度改為1，來實現(xiàn)替換效果，這里的好處是替換的圖片用png格式的話就是遮罩，并不是完全替換。

html代碼示例：

<div><img alt="" src="images/1.jpg" /><span><img alt="" src="images/1.png" /></span></div>

css代碼示例：

div{width: 338px;height: 301px;position: relative;}
span{display: block;position: absolute;top: 0;left: 0;opacity: 0;}
span:hover{opacity: 1;cursor: pointer;}