本次用到的两张图片，一张是正常显示的图片，另一张是替换图片。

1.jpg1.png
第一种：主要用了onMouseOver和onMouseOut事件
html代码：
<img alt="" src="data:images/1.jpg" onMouseOver="this.src='images/1.png'" onMouseOut="this.src='images/1.jpg'">
css代码：
img:hover{ cursor: pointer; }
 
1）、alt表示图片不能正常显示时的替换内容，里面可以加上文字，一般不写这个属性的话会有警告错误，所以我一般是会加上的。
2）、src="url()"表示图片的地址，此处的意思是images文件夹下的名字为1的jpg图片。
3）、onMouseOver 属性是鼠标指针移动到元素上时触发的。
4）、onMouseOut属性是鼠标指针移出元素是触发的。
此处的意思是 在鼠标移入时显示1.png，移出时显示1.jpg。
5）、img:hover 是鼠标经过img标签时显示的内容。
6）、cursor:pointer 表示鼠标经过是指针显示为小手形状。
注：这里是两张图片完全替换，鼠标移入时图片1.jpg完全不会显示。
第二种：用了鼠标经过时background背景图片的改变
html代码：
<a href=""></a>
css代码：
a{
display:block;
width: 338px;
height: 301px;
background: url(../images/1.jpg);
}
a:hover{
background: url(../images/1.png);
这里我用了a链接，为了方便点击。其实也可以用其他的标签。
首先把a标签转换为块级标签，定义它的宽度高度。设置原来的背景图片。
鼠标经过时改变a标签的背景图片就可以达到目的。
第三种：利用了opacity透明属性
html代码：
<div>
<img alt="" src="data:images/1.jpg" />

　　<span><img alt="" src="data: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;
}
 
先是用了position定位，把替换的图片定位在div中和原来img图片重合的地方，然后把替换的图片设置成透明，到鼠标经过的时候把透明度改为1，来实现替换效果，这里的好处是替换的图片用png格式的话就是遮罩，并不是完全替换。

简单的三种实现鼠标经过切换图片的方法相关推荐

  1. dg oracle 切换模式_Oracle数据库 DGbroker三种保护模式的切换

    1.三种保护模式 – Maximum protection 在Maximum protection下, 可以保证从库和主库数据完全一样,做到zero data loss.事务同时在主从两边提交完成,才 ...

  2. 怎么把线稿提取出来_PS教程：提取线稿如此简单？三种方法总有一种适合你

    原标题:PS教程:提取线稿如此简单?三种方法总有一种适合你 部落窝教育,每天学习PS独家原创视频 在PS出现之前,如果我们喜欢某个动漫角色大概只能通过临摹的方式将人物线条勾勒出来,但PS的出现将提取线 ...

  3. oracle dg apply lag,Oracle数据库 DGbroker三种保护模式的切换

    1.三种保护模式 – Maximum protection 在Maximum protection下, 可以保证从库和主库数据完全一样,做到zero data loss.事务同时在主从两边提交完成,才 ...

  4. 三种快速转换PDF为TXT的方法：简单、高效、免费

    如何将PDF转换为TXT文件?在日常生活中,PDF和TXT是常见的文本格式.PDF格式文件具有稳定的布局和易于存储的特点.然而,许多在线下载的电子书通常是以PDF格式提供的,而电子阅读器通常不支持PD ...

  5. WPF之鼠标滑动切换图片

    原文:WPF之鼠标滑动切换图片 在网上找了一会儿也没找到我想要的效果,还是自己动手,丰衣足食吧. 需求:当前面板中只显示一张图片,图片栏的下部有用来显示当前图片处于图片队列中的位置的圆球,并且点击下部 ...

  6. adb 重命名_Linux操作系统：三种最基本的文件重命名方法

    在我们的工作生活中,不管是程序员还是非程序员,我们都会遇到过一个需求,那就是对一堆的文件进行重命名.在Windows下有很多优秀的软件可以帮助我们完成这个需求,而在Linux环境下,我们可以简单敲一些 ...

  7. 三种获取Class类型的实例的方法

    通过Object类中的getClass()方法: 通过静态方法Class.forName("全类名"): 通过类字面常量Class.class. 三种获取Class类型的实例的方法 ...

  8. 【JavaScript】js可以直接使用的鼠标经过切换图片

    js实现简单的鼠标经过切换图片,鼠标移出图片还原. 代码如下 <!DOCTYPE html> <html lang="en"> <head>&l ...

  9. css里面li标签怎么加图片_分享三种给li标签添加图标的方法

    我们在页面布局时,经常会用到li标签,单独使用li标签比较单调,有时候为了页面效果,需要加入图片,那怎么在li标签中添加图片呢?这篇文章就和大家分享三种给li标签添加图标的方法,希望对你有用. 1.使 ...

  10. 三种获得自动生成主键的方法,getGeneratedKeys，专用SQL和可更新的结果集

    简单总结了一下我目前知道的方法. package test; import java.sql.Connection; import java.sql.DriverManager; import jav ...

最新文章

  1. mybatis jdbctype数据类型_mybaits-mybatis配置
  2. Mathcad Prime 下载 安装 与 和谐教程
  3. C语言学习之分别用while、for 编写程序,计算1+2+3+......+100的值
  4. leetcode991. 坏了的计算器（贪心）
  5. react学习(47)----react中initialValue和value不能一起定义
  6. 【C++】C++读取文本中的特定一列
  7. Android笔记 fragment的生命周期
  8. Django--ORM基本操作
  9. python是一种代表简单主义思想的语言_setuptools-36.6.0
  10. 微服务笔记（二） 服务发现
  11. 信息技术手册查重错误比对分析程序开发记录3
  12. vue开发pc端支付方式（支付宝、微信、银联）
  13. node_redis 中文文档及node_redis 注释笔记(中文版)
  14. 从程序员到项目经理（10）：程序员加油站 --要执着但不要固执【转载】
  15. Windows fatal exception: code 0xe06d7363
  16. （二十三）Animator 实例 —— 开场动画
  17. 常见的医学图像成像(总）
  18. 战狼5天票房10亿，吴京抵押房产贷款赚大了
  19. 每天自动发英文外链 247backlinks
  20. 拆解药师帮上市：仍处于尴尬境地，究竟动了谁的奶酪？

热门文章

  1. AutoPatch java_EBS开发技术之Patch安装
  2. linux怎么查看hwaddr_Linux查看MAC地址方法
  3. linux通过修改/etc/hosts文件 添加IP地址与域名的映射
  4. 【随机过程】课后作业 1-条件概率期望密度
  5. oracle 索引详解 注：转自红黑联盟非原创
  6. vue各模块功能范围，webpack属性配置
  7. PHP初中高级学习在线文档下载
  8. 【昭阳】开源第2弹 JXT
  9. 这样学编程，直接原地起飞啊！
  10. python语言月份缩写_Python替换月份为英文缩写的实现方法