本次用到的兩張圖片，一張是正常顯示的圖片，另一張是替換圖片。
1.jpg
1.png
第一種：主要用了onMouseOver和onMouseOut事件
html代碼：
<img alt="" src="images/1.jpg" onMouseOver="this.src='images/1.png'" onMouseOut="this.src='images/1.jpg'">
css代碼：
img:hover{ cursor: pointer; }
1）、alt表示圖片不能正常顯示時的替換內容，里面可以加上文字，一般不寫這個屬性的話會有警告錯誤，所以我一般是會加上的。
2）、src="url()"表示圖片的地址，此處的意思是images文件夾下的名字為1的jpg圖片。
3）、onMouseOver 屬性是鼠標指針移動到元素上時觸發的。
4）、onMouseOut屬性是鼠標指針移出元素是觸發的。
此處的意思是 在鼠標移入時顯示1.png，移出時顯示1.jpg。
5）、img:hover 是鼠標經過img標簽時顯示的內容。
6）、cursor:pointer 表示鼠標經過是指針顯示為小手形狀。
注：這里是兩張圖片完全替換，鼠標移入時圖片1.jpg完全不會顯示。
第二種：用了鼠標經過時background背景圖片的改變
html代碼：
<a href=""></a>
css代碼：
a{
display:block;
width: 338px;
height: 301px;
background: url(../images/1.jpg);
}
a:hover{
background: url(../images/1.png);
這里我用了a鏈接，為了方便點擊。其實也可以用其他的標簽。
首先把a標簽轉換為塊級標簽，定義它的寬度高度。設置原來的背景圖片。
鼠標經過時改變a標簽的背景圖片就可以達到目的。
第三種：利用了
opacity透明屬性
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;
}
先是用了position定位，把替換的圖片定位在div中和原來img圖片重合的地方，然后把替換的圖片設置成透明，到鼠標經過的時候把透明度改為1，來實現替換效果，這里的好處是替換的圖片用png格式的話就是遮罩，並不是完全替換。