简单的三种实现鼠标经过切换图片的方法
本次用到的两张图片，一张是正常显示的图片，另一张是替换图片。
第一种：主要用了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格式的话就是遮罩，并不是完全替换。
