安裝使用jQuery

Question

我有以下的HTML

<div id="logoandsearch">       
    <a class="searchIcon visible-phone" href="javascript:void(0);"><i class="icon-search"></i></a> 
    <div id="secondaryNav" class="visible-desktop"> 
     <ul> 
      <li></li> 
     </ul> 
    </div> 
    <div id="top-search"> 
     <div id="top-searchbox"> 
      <asp:TextBox runat="server" ID="txtSearch" autocomplete="off" ClientIDMode="Static" MaxLength="100"></asp:TextBox> 
      <input type="button" id="btnSearch" value="Search" class="btn btn-inverse" /> 
     </div> 
    </div> 
</div> 
<div class="phoneSearchBox" style="display: none"> 
    <input type="text" class="searchtextPhone"/> 
    <input type="button" class="btn btn-primary btnPhoneSearch" value="Search"/> 
</div> 

我的要求是，當我的「searchIcon」元素與類「phoneSearchBox」股利懸停顯示懸停事件的多個元素，並且用戶可以輸入文本並可以擊中搜索按鈕。但是，當我這樣做.hover（）事件毫無疑問「phoneSearchBox」顯示，但是當我將鼠標移出「searchIcon」並轉到div「phoneSearchBox」它消失。 我曾嘗試使用：

$('.searchIcon, .phoneSearchBox').hover(function() { 
     $('.phoneSearchBox').show(); 
    } 
    , function() { 
     $('.phoneSearchBox').hide(); 
    }); 

但無法得到此工作。 任何幫助完成這一點高度讚賞？

Answer 1

這裏的主要問題是，只要鼠標從搜索圖標中存在，搜索框就會隱藏起來，不會有任何延遲。

一種可能的解決方案是這種情況是使用基於計時器的隱藏功能，如下所示。

嘗試像

$('.searchIcon').hover(function() { 
    //clear any previously registered hide functions 
    clearInterval($phoneSB.data('hoverTimer')) 

    //on hover of the icon show search form 
    $phoneSB.show();  
}, function() { 
    //when mouse leaves wait for 200 milliseconds before the search form is hidden... it gives user some time to go to the search box 
    var timer = setTimeout(function() { 
     $phoneSB.hide(); 
    }, 200); 
    //store the handler id for future reference 
    $phoneSB.data('hoverTimer', timer) 
}); 

var $phoneSB = $(' .phoneSearchBox').hover(function() { 
    //clear the hide event handler since the user has come to the search form 
    clearInterval($phoneSB.data('hoverTimer')); 
}, function() { 
    //if the user leaves the serarch form hide it again 
    $phoneSB.hide(); 
}) 

演示：Fiddle