45fan.com - 路饭网

搜索: 您的位置主页 > 电脑频道 > 编程代码 > 阅读资讯:css也可以实现鼠标滑动到img图片后切换图片,移开恢复默认

css也可以实现鼠标滑动到img图片后切换图片,移开恢复默认

2015-02-26 11:16:27 来源:www.45fan.com 【
css也可以实现鼠标滑动到img图片后切换图片,移开恢复默认

先来看个例子: 

复制代码 代码如下:

<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\';">

实现效果

初始状态:
 
鼠标滑动上:
 
鼠标移开:

本文地址:http://www.45fan.com/bcdm/9754.html
Tags: css
编辑:路饭网
推广内容
推荐阅读
热门推荐
推荐文章
关于我们 | 联系我们 | 友情链接 | 网站地图 | Sitemap | App | 返回顶部