大学生网页设计教程素材网

热门搜索: 网页设计 1 2021 2023 2022 1*1

最新交易

原创可商用
海量更新
不限下载
完美售后

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

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

MY-FOLIO-–-Responsive-Retina-Ready-HTML5.jpg

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


上一篇:

下一篇:

Hi, 欢迎加入爱建素材网技术交流群,带你装逼带你飞!

我要入群

爱建素材网,累计帮助1000+学生成功解答网页技术学习,为学习网站开发提供助力!

立刻开启你的建站之旅

在线
客服

在线客服

在线客服 - 爱建素材网周一至周日 10:00-24:00(欢迎呼叫)

选择下列服务马上在线沟通:

客服热线

客服
热线

服务热线

18789616245
6*12小时客服服务热线

微信二维码

微信
二维

微信二维码
顶部