STU网页作业

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

更新时间:3个月前   文章分类:网页技术课堂

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

未标题-3

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;}


STU网页公众号

STU网页设计(STU-WORKS)专注于DW网页设计制作,学生网页设计作业,简单网页模板下载,HTML静态网页成品,网页设计代做,网站作品定制,网页毕业设计制作,学生网页成品免费下载...

qq code back_top

微信扫码咨询