jQuery 移入显示div，移出当前div，移入到另一个div还是显示。

jQuery 移入移出 操作div

 1 <style type="text/css">
 2             .box{
 3                 position: relative;
 4             }
 5             .box1{
 6                 width: 80px;
 7                 height: 80px;
 8                 border: 1px solid red;
 9             }
10             .box2{
11                 width: 200px;
12                 height: 200px;
13                 background-color: blue;
14                 position: absolute;
15                 top: 0;
16                 left: 100px;
17                 display: none;
18             }
19         </style>
20 
21 <body>
22         <div class="m-5 box">
23             <div class="box1">
24                 
25             </div>
26             <div class="box2">
27                 
28             </div>
29         </div>
30         <script src="js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
31         <script type="text/javascript">
32             $(function(){
33                 var timer;
34                 $(".box1").hover(function(){
35                     $(".box2").stop().fadeIn();
36                     clearInterval(timer);
37                 },function(){
38                     timer = setTimeout(function(){
39                         $(".box2").stop().fadeOut();
40                     },500)
41                 })
42                 
43                 var that;
44                 $(".box2").hover(function(){
45                     that = $(this);
46                     that.stop().fadeIn();
47                     clearInterval(timer);
48                 },function(){
49                     timer = setTimeout(function(){
50                         that.stop().fadeOut();
51                     },500)
52                 })
53             })
54         </script>
55     </body>

 

效果如下：

 

posted @ 2021-01-12 23:49  芳香四溢713051  阅读(378)  评论(0)    收藏  举报