代码疯子 - IT技术交流论坛-无限Perfect,追求梦想

 找回密码
 立即注册

用百度帐号登录

只需两步,快速登录

QQ登录

只需一步,快速开始

搜索
热搜: 教程 软件 源码
查看: 52|回复: 10

[HTML+CSS] 鼠标放到图片上改变图片

[复制链接]

2

主题

26

帖子

8

积分

菜鸡代码

Rank: 1

积分
8
发表于 2020-10-21 18:03:00 | 显示全部楼层 |阅读模式

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <script>
  7.         //window.onload页面加载完毕以后再执行此代码
  8.         window.onload = function () {
  9.             //1.获取事件源
  10.             var img = document.getElementById("box");
  11.             //2.绑定事件(悬停事件:鼠标进入到事件源中立即出发事件)
  12.             img.onmouseover = function () {
  13.             //3.书写事件驱动程序(修改src)
  14.                 img.src = "image/jd2.png";
  15.             }
  16.             img.onmouseout = function () {
  17.                 this.src = "image/jd1.png";
  18.             }
  19.         }
  20.     </script>
  21. </head>
  22. <body>
  23.     <img id="box" src="image/jd1.png" style="cursor: pointer;border: 1px solid #ccc;"/>
  24. </body>
  25. </html>
复制代码


欢迎光临IT技术交流论坛:https://www.daimafengzi.com
省钱君,您的省钱专家:https://www.sqjun.com

1

主题

11

帖子

3

积分

菜鸡代码

Rank: 1

积分
3
发表于 2020-10-21 18:03:02 | 显示全部楼层
已经处理,感谢您对代码疯子论坛的支持!
欢迎光临IT技术交流论坛:https://www.daimafengzi.com
省钱君,您的省钱专家:https://www.sqjun.com
回复

使用道具 举报

0

主题

6

帖子

2

积分

菜鸡代码

Rank: 1

积分
2
发表于 2020-10-22 03:43:49 | 显示全部楼层
楼主发几张靓照啊!
欢迎光临IT技术交流论坛:https://www.daimafengzi.com
省钱君,您的省钱专家:https://www.sqjun.com
回复

使用道具 举报

1

主题

3

帖子

1

积分

菜鸡代码

Rank: 1

积分
1
发表于 2020-10-24 05:14:25 | 显示全部楼层
今天过得很不爽!
欢迎光临IT技术交流论坛:https://www.daimafengzi.com
省钱君,您的省钱专家:https://www.sqjun.com
回复

使用道具 举报

0

主题

21

帖子

6

积分

菜鸡代码

Rank: 1

积分
6
发表于 2020-10-25 15:58:16 | 显示全部楼层
很经典,收藏了!
欢迎光临IT技术交流论坛:https://www.daimafengzi.com
省钱君,您的省钱专家:https://www.sqjun.com
回复

使用道具 举报

0

主题

14

帖子

4

积分

菜鸡代码

Rank: 1

积分
4
发表于 2020-11-3 12:03:50 | 显示全部楼层
缺乏激情了!
欢迎光临IT技术交流论坛:https://www.daimafengzi.com
省钱君,您的省钱专家:https://www.sqjun.com
回复

使用道具 举报

0

主题

23

帖子

7

积分

菜鸡代码

Rank: 1

积分
7
发表于 2020-11-9 14:12:54 | 显示全部楼层
学习雷锋,好好回帖!
欢迎光临IT技术交流论坛:https://www.daimafengzi.com
省钱君,您的省钱专家:https://www.sqjun.com
回复

使用道具 举报

0

主题

20

帖子

6

积分

菜鸡代码

Rank: 1

积分
6
发表于 2020-11-16 02:02:46 | 显示全部楼层
支持一下,下面的保持队形!
欢迎光临IT技术交流论坛:https://www.daimafengzi.com
省钱君,您的省钱专家:https://www.sqjun.com
回复

使用道具 举报

0

主题

29

帖子

9

积分

菜鸡代码

Rank: 1

积分
9
发表于 2020-11-20 02:40:45 | 显示全部楼层
谢谢@Thanks!
欢迎光临IT技术交流论坛:https://www.daimafengzi.com
省钱君,您的省钱专家:https://www.sqjun.com
回复

使用道具 举报

0

主题

10

帖子

3

积分

菜鸡代码

Rank: 1

积分
3
发表于 6 天前 | 显示全部楼层
写得实在太好了,我唯一能做的就是默默顶贴!
欢迎光临IT技术交流论坛:https://www.daimafengzi.com
省钱君,您的省钱专家:https://www.sqjun.com
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册 用百度帐号登录

本版积分规则

QQ|Archiver|手机版|小黑屋|IT技术交流论坛 ( 闽ICP备13013206号-7 )

GMT+8, 2020-12-2 14:52 , Processed in 0.067910 second(s), 28 queries , Gzip On, Redis On.

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表