简单的三种实现鼠标经过切换图片的方法

本次用到的两张图片，一张是正常显示的图片，另一张是替换图片。

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格式的话就是遮罩，并不是完全替换。