0

0

jquery怎样判断鼠标是否在div上

coldplay.xixi

coldplay.xixi

发布时间:2020-12-07 16:23:12

|

4389人浏览过

|

来源于php中文网

原创

判断方法:首先使用onmouseover属性给div绑定鼠标事件,当鼠标移到div上时,会触发onmouseover鼠标事件,执行myfun()函数,进而执行myfun函数内的alert()方法,然后触发弹窗提示【鼠标在div上】。

jquery怎样判断鼠标是否在div上

本教程操作环境:windows7系统、jquery3.2.1版本,Dell G3电脑。

推荐:jquery视频教程

jquery判断鼠标是否在div上的方法:

1、新建一个html文件,命名为test.html,用于讲解jquery怎么判断鼠标是否在div上。

97d1e5df05294239789349357e5cb99.png

2、在test.html文件内,使用div创建一个模块,并设置其id为mydiv,主要用下下面设置其css样式。

afabd788bd0041ca4ea293ff207b344.png

3、为了展示明显的效果,通过id来设置div的css样式,设置div的宽度和高度都为100px,背景颜色为红色。

a13008deb9ee595f90151b54bf3ee6f.png

4、在test.html文件内,给div绑定onmouseover()事件,当鼠标移到div时,触发事件,执行myfun()函数。

Litero
Litero

AI co-writer for students

下载

535868e4bac801514856ee10b9a3888.png

5、在js标签内,创建一个myfun()函数,当函数被调用时,执行方法体内的代码。

408d9ca0381cbf3a54dcc4ff2352296.png

6、在myfun()函数内,使用alert()方法提示“鼠标在div上了!!”,确认鼠标是在div上。

2efc9257bb0fd6ba72526e14dc3865d.png

7、在浏览器打开test.html文件,移动鼠标至div上,查看结果。

c7fdaf6060dd78bb1485c1f3dda0884.png

相关免费学习推荐:javascript(视频)

相关专题

更多
ip地址修改教程大全
ip地址修改教程大全

本专题整合了ip地址修改教程大全,阅读下面的文章自行寻找合适的解决教程。

33

2025.12.26

压缩文件加密教程汇总
压缩文件加密教程汇总

本专题整合了压缩文件加密教程,阅读专题下面的文章了解更多详细教程。

18

2025.12.26

wifi无ip分配
wifi无ip分配

本专题整合了wifi无ip分配相关教程,阅读专题下面的文章了解更多详细教程。

46

2025.12.26

漫蛙漫画入口网址
漫蛙漫画入口网址

本专题整合了漫蛙入口网址大全,阅读下面的文章领取更多入口。

91

2025.12.26

b站看视频入口合集
b站看视频入口合集

本专题整合了b站哔哩哔哩相关入口合集,阅读下面的文章查看更多入口。

283

2025.12.26

俄罗斯搜索引擎yandex入口汇总
俄罗斯搜索引擎yandex入口汇总

本专题整合了俄罗斯搜索引擎yandex相关入口合集,阅读下面的文章查看更多入口。

370

2025.12.26

虚拟号码教程汇总
虚拟号码教程汇总

本专题整合了虚拟号码接收验证码相关教程,阅读下面的文章了解更多详细操作。

35

2025.12.25

错误代码dns_probe_possible
错误代码dns_probe_possible

本专题整合了电脑无法打开网页显示错误代码dns_probe_possible解决方法,阅读专题下面的文章了解更多处理方案。

25

2025.12.25

网页undefined啥意思
网页undefined啥意思

本专题整合了undefined相关内容,阅读下面的文章了解更多详细内容。后续继续更新。

72

2025.12.25

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
jQuery 教程
jQuery 教程

共42课时 | 3.4万人学习

HTML+CSS基础与实战
HTML+CSS基础与实战

共132课时 | 9.2万人学习

tp6+adminlte搭建通用后台
tp6+adminlte搭建通用后台

共39课时 | 5.7万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号