手机
当前位置:查字典教程网 >网页设计 > Div+Css教程 >css实现的滑动鼠标到img后切换图片移开恢复默认
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" onMouseOver="this.src='images/blue'+i+'s.png'"; onMouseOut="this.src='images/red'+i+'s.png';">

实现效果

初始状态:

1

鼠标滑动上:

2

鼠标移开:

3

【css实现的滑动鼠标到img后切换图片移开恢复默认】相关文章:

文字环绕图片的布局效果

CSS实现图片圆角化处理

纯css实现的下拉菜单只有边框底纹用到图片

一款css实现的鼠标经过按钮的特效

用css3实现当鼠标移进去时当前亮其他变灰效果

CSS实现文字自动换行(兼容Firefox)

css实现鼠标滑过改变文字(中文变英文)

十套非常漂亮的CSS3按钮样式 无需图片

css实现图片在div中居中的效果

css 控制鼠标显示样式示例

精品推荐
分类导航