码迷,mamicode.com
首页 > Web开发 > 详细

css滑动鼠标到img后,切换图片

时间:2018-01-21 14:44:18      阅读:215      评论:0      收藏:0      [点我收藏+]

标签:red   ott   data-   pos   wrap   luci   family   style   post   

写了个样例: 
<a href="#"><img src="http://csdnimg.cn/pubfooter/images/gongshang_logos.gif" border="0" onMouseOver="this.src=‘http://www.baidu.com/img/baidu_jgylogo3.gif?v=07491728.gif‘" onMouseOut="this.src=‘http://img.baidu.com/img/logo-zhidao.gif‘" /></a> 

在动态代码中的写法:
<img src="images/red‘+i+‘s.png" style="width:20px;height:29px;" onMouseOver="this.src=\‘images/blue‘+i+‘s.png\‘"; onMouseOut="this.src=\‘images/red‘+i+‘s.png\‘;">

实现效果
初始状态:

鼠标滑动上:
鼠标移开:

                    

css滑动鼠标到img后,切换图片

标签:red   ott   data-   pos   wrap   luci   family   style   post   

原文地址:https://www.cnblogs.com/llguanli/p/8324034.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!