学生网页作业中三种实现简单鼠标经过变换图片的方法

学生在完成网页设计作业时，有的时候想加入一些鼠标经过的交互效果，比如实现鼠标经过变换图片，这里STU-WORKS.COM为大家分享三种简单实现鼠标经过变换图片的方法。

onMouseOver和onMouseOut事件

onMouseOver 属性是鼠标指针移动到元素上时触发的，onMouseOut属性是鼠标指针移出元素是触发的。

html代码示例：

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

鼠标经过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标签转换为块级标签，定义它的宽度高度。鼠标经过时改变a标签的背景图片就可以达到目的。

利用opacity透明属性

先用position定位，把替换的图片定位在div中和原来img图片重合的地方，然后把替换的图片设置成透明，到鼠标经过的时候把透明度改为1，来实现替换效果，这里的好处是替换的图片用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;}