在 jQuery 中, 可以使用 mouseover() 和 mouseout() 方法来实现判断鼠标是否在元素上. 下面本篇文章就来给大家具体介绍一下. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
当鼠标指针位于元素上方时, 会发生 mouseover 事件, 当鼠标指针从元素上移开时, 发生 mouseout 事件.
PS: 和 mouseenter/mouseleave 事件不同, 不论鼠标指针进入 / 离开被选元素还是任何子元素, 都会触发 mouseover/mouseout 事件. 只有在鼠标指针进入 / 离开被选元素时, 才会触发 mouseenter/mouseleave 事件.
- $("#aijquery").mouseover(function(){
- $(".primary").text("方法二: 鼠标在这个 DIV 元素里");
- }).mouseout(function(){
- $(".primary").text("方法二: 鼠标不在这个 DIV 元素里");
- });
缺点: 在页面初始化时, 也就是刚打开页面时, 是判断不出来的, 只有把鼠标移上 div 上一次, 激活了 mouseover 事件后, 才能判断, 具体可以看上面给的那个在线实例演示.
示例:
- <!doctype html>
- <HTML>
- <head>
- <script language="JavaScript" src="//cdn.bootCSS.com/jquery/1.9.1/jquery.min.js">
- </script>
- <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
- </head>
- <body class="text-center p-5">
- <DIV class="border border-danger p-5">
- <Div id="aijquery" class="border border-dark p-3 alert-success">
- <span class="primary border border-dark">
- inifo
- </span>
- <br>
- </Div>
- </DIV>
- <script language="JavaScript">
- $("#aijquery").mouseover(function() {
- $(".primary").text("鼠标在这个 DIV 元素里");
- }).mouseout(function() {
- $(".primary").text("鼠标不在这个 DIV 元素里");
- });
- </script>
- </body>
- </HTML>
效果图:
mouseover() 方法
当鼠标指针位于元素上方时, 会发生 mouseover 事件.
mouseover() 方法触发 mouseover 事件, 或添加当发生 mouseover 事件时运行的函数.
mouseout() 方法
当鼠标指针离开被选元素时, 会发生 mouseout 事件.
mouseout() 方法触发 mouseout 事件, 或添加当发生 mouseout 事件时运行的函数.
更多前端开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/jquery/16999.html