鼠標懸停控制下拉框的顯示和隱藏

先上圖：

要求鼠標懸浮在用戶名上時 彈出下拉框，鼠標離開用戶名時下拉框隱藏，並且鼠標移動到下拉框上時下拉框不隱藏。

html代碼：

 

1.  
   <div class="user_header">
2.  
   <a class="user_a" href="javascript:void(0);"><label runat="server" id="user"></label><i class="user_arrow"></i></a>
3.  
   <div class="userInfo">
4.  
   <ul class="user_ul">
5.  
   <li><a href="#"><i class="user_perInfo"></i>個人信息</a></li>
6.  
   <li><a href="#"><i class="user_lock"></i>鎖定屏幕</a></li>
7.  
   <li><a href="#"><i class="user_key"></i>退出</a></li>
8.  
   </ul>
9.  
   </div>
10.  
    </div>

這里難控制的是鼠標離開用戶名時的判斷，這個地方我試了我想到的幾個辦法結果都不理想，最后在網上找到大神的提示，最后解決如下：

 

 

1.  
   var timer;
2.  
   $( ".user_header a").mouseover(function () {
3.  
   clearTimeout(timer);
4.  
   $( ".userInfo").show();
5.  
   });
6.  
   $( ".user_header a").mouseout(function () {
7.  
   timer = setTimeout(function () {
8.  
   $( ".userInfo").hide();
9.  
   }, 500);
10.  
    });
11.  
    $( ".user_ul").mouseover(function () {
12.  
    clearTimeout(timer);
13.  
    });
14.  
    $( ".user_ul").mouseout(function () {
15.  
    $( ".userInfo").hide();
16.  
    });

思路：1、當鼠標進入(mouseover)用戶名時，彈出下拉框；

 

           2、當鼠標離開(mouseout)用戶名時，添加一個定時器來隱藏下拉框；

          3、當鼠標進入(mouseover)下拉框時，清除定時器；

         4、當鼠標離開(mouseout)下拉框時，下拉框隱藏；