写了个样例:

<a href="#"><img src="http://csdnimg.cn/pubfooter/images/gongshang_logos.gif" border="0" onMouseOver="this.src='v=07491728.gif" style="color:rgb(0,0,238);font-family:Consolas, 'Lucida Console', monospace;white-space:pre-wrap;">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="data: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后，切换图片的更多相关文章
	

    
								
  1. 【jQuery】鼠标接触按钮后改变图片
		
    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...
    
		
    2. 
						
  2. Jquery的动态切换图片
		
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
    
		
    3. 
						
  3. 鼠标悬停，使用css切换图片
		
    鼠标悬停,使用css切换图片 当鼠标悬停在li上面切换另一张图片,只需添加下述css样式即可
    
		
    4. 
						
  4. 原生JS—实现图片循环切换及监测鼠标滚动切换图片
		
    今天我们主要讲讲如何使用原生JS实现图片的循环切换的方法以及如何检测鼠标滚动循环切换图片.多余的话我们就不多说了,我们一个一个开始讲吧. 1  原生JS实现图片循环切换 -- 方法一 在上栗子之前我们 ...
    
		
    5. 
						
  5. H5+CSS3实现手指滑动切换图片
		
    包含3个文件:html.slider-H5.js.jquery.js(自行下载).在html中可配置滑动参数.具体代码如下: HTML代码: <!DOCTYPE HTML> <htm ...
    
		
    6. 
						
  6. CSS鼠标点击式变化图片透明度
		
    今天分享前端代码主题:jequery控制css图片透明度 很多时候在网站图片处理上需要实现一些辅助效果,比如鼠标在图片上滑动时或点击时改变图片颜色(变灰或者其他),其实一个简单的办法就是改变图片css ...
    
		
    7. 
						
  7. 代码：　CSS3动画，简单示例（鼠标移上去后，背景图片旋转）
		
    <script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.2/jquery.mi ...
    
		
    8. 
						
  8. 基于jQuery左右滑动切换图片代码
		
    分享一款基于jQuery左右滑动切换图片代码.这是一款基于jQuery实现的左右滑动切换焦点图代码.效果图如下: 在线预览   源码下载 实现的代码: <div class="v_ou ...
    
		
    9. 
						
  9. jQuery实现的鼠标滑过切换图片代码实例
		
    jQuery实现的鼠标滑过切换图片代码实例:有时候网页需要这样的简单效果,那就是当鼠标滑过默认图片的时候,能够实现图片的切换,可能在实际应用中,往往没有这么简单,不过大家可以自行扩展一下,下面简单介绍 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. OJ刷题---猜算式
			
    题目要求: 输入代码: #include<iostream> using namespace std; void Calc(); int main() { Calc(); return 0 ...
    
			
    2. 
						
  2. Android 採用HTML设计界面
			
    由于Android软件开发分工眼下还没有细化,程序猿往往须要负责软件界面的开发,尽管软件的界面图片已经由美工设计好了.可是假设使用layout技术把软件做成美丽的界面确实非常困难,而是也比較耗时.An ...
    
			
    3. 
						
  3. Day1下午解题报告
			
    预计分数:0+30+30=60 实际分数:0+30+40=70 T1水题(water) 贪心,按长度排序, 对于第一幅牌里面的,在第二个里面,找一个长度小于,高度最接近的牌 进行覆盖. 考场上的我离正 ...
    
			
    4. 
						
  4. errpt命令
			
    errpt –a 详细信息 errpt  -a –s [TIMESTAMP] errpt –aj  [IDENTIFIER] errclear 清除(后面接参数) errpt -aj BFE4C025 ...
    
			
    5. 
						
  5. JavaScript--数据结构与算法之散列
			
    散列:实现散列表的数据后可以快速地实现插入或者删除.但是对于实现查找操作则效率非常的低.散列表的底层是数组实现的,长度是预先设定,可以随时根据需求增加.所有的元素根据和该元素对应的键,保存在特定的位置 ...
    
			
    6. 
						
  6. 洛谷——P2957 [USACO09OCT]谷仓里的回声Barn Echoes
			
    https://www.luogu.org/problem/show?pid=2957 题目描述 The cows enjoy mooing at the barn because their moo ...
    
			
    7. 
						
  7. 深入具体解释SQL中的Null
			
    NULL 在计算机和编程世界中表示的是未知,不确定.尽管中文翻译为 "空", 但此空(null)非彼空(empty). Null表示的是一种未知状态.未来状态,比方小明兜里有多少钱 ...
    
			
    8. 
						
  8. 摆脱技术思维，转向产品思维——寻找“万能”IDC的苦恼
			
    背景:近期在新产品的开发任务完毕后一直在为寻找好的IDC和优质的托管服务忙碌.需求源自于我们重点要解决之前老版产品面临的国内外用户訪问速度慢甚至连接不上的问题. 除去架构技术上使用高性能.可扩展的方案 ...
    
			
    9. 
						
  9. TCP／IP图解学习总结(二)
			
    注意:这里的第n层是依照OSI协议来的 I   网桥--2层交换机.数据链路层面上链接两个网络的设备.它可以识别数据链路层中的数据帧. II  路由器-3层交换机.网络层面上连接两个网络,并对分组报文 ...
    
			
    10. 
						
  10. poj2796
			
    #include <cstdio> /* * source poj.2796 * 题目: * 给定一个非负数的数组 其中value[l,r] = sum(l,r) * min (l,r); ...
    
			
    11.