JQuery--mouseover()与moseout()的区别

Posted QinXiao.Shou

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JQuery--mouseover()与moseout()的区别相关的知识,希望对你有一定的参考价值。

mouseover()与mouseout()区别

 普通鼠标移入移出事件
语法:
mouseover()/mouseout()
功能:
当鼠标移入/移出到添加事件的元素或其子元素的时候,都会被触发
!!mouseenter/mouseleave是更好的鼠标移入事件!!
语法:
mouseenter()/mouseleave()
功能:
当鼠标移入/移出到添加事件的元素才会被触发,子元素不会被触发
例子:
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .father{
 8             width: 300px;
 9             height: 200px;
10             background-color: #2AB89A;
11             border: 1px solid #cc6600;
12         }
13 
14         .son{
15             width: 100px;
16             height: 100px;
17             background-color:skyblue;
18             border: 1px solid #fff;
19         }
20     </style>
21     <script src="lib/jquery-1.12.2.js"></script>
22     <script>
23         $(function () {
24             // mouseover
25        /*     $(‘.father‘).mouseover(function () {
26                 console.log("moseouer");
27             });
28 
29             // mouseout
30             $(‘.father‘).mouseout(function () {
31                 console.log("mouseout");
32                 $(this).hide();
33             });*/
34 
35             $(‘.father‘).mouseenter(function () {
36                 console.log("mouseenter");
37             });
38 
39             // mouseout
40             $(‘.father‘).mouseleave(function () {
41                 console.log("mouseleave");
42                 $(this).hide();
43             });
44         });
45     </script>
46 </head>
47 <body>
48 <h1>鼠标移出大盒子的时候才隐藏大盒子</h1>
49 <div class="father">
50     外面的老爹
51     <div class="son">
52         里面的孩子
53     </div>
54 </div>
55 </body>
56 </html>

 

 

以上是关于JQuery--mouseover()与moseout()的区别的主要内容,如果未能解决你的问题,请参考以下文章

何时选择 mouseover() 和 hover() 函数?

jquery Mouseover添加/删除类

jquery mouseover 的更好方法?

jquery mouseover/mouseout

Jquery mouseover多次触发问题

jQuery mouseover / mouseout 显示/隐藏 div