jQuery動畫搜索欄上懸停的按鈕

Question

我有一個搜索欄外的搜索按鈕，用於顯示/隱藏懸停搜索欄。我有搜索欄div動畫，但我需要幫助來改變jQuery，以便當用戶將鼠標從按鈕移動到框中時，搜索欄保持打開狀態。

我已經做了一個小提琴展示我有什麼，謝謝你的幫助。

我的HTML：

<div id="navBar"> 
    <div class="searchBTN"><button class="search closed">S</button></div> 
</div> 
<div id="search"> 
    <div class="searchHolder"></div> 
</div> 

我的JS：

$('.searchBTN button').hover(function(){ 
    $('.searchHolder').filter(':not(:animated)').animate({ 
    height: 80 
    }, 'slow'); 
}, 
function() { 
    $('.searchHolder').animate({ 
     height: 0 
    }, 'slow'); 
}); 

小提琴：https://jsfiddle.net/8ry7rvxL/12/

Answer 1

你需要#navBar（div容器）hover事件，不searchBTN

$('#navBar').hover(function(){ 
     $('.searchHolder').filter(':not(:animated)').animate({ 
     height: 80 
     }, 'slow'); 
    }, 
    function() { 
     $('.searchHolder').animate({ 
      height: 0 
     }, 'slow'); 
    }); 

工作示例：https://jsfiddle.net/DinoMyte/8ry7rvxL/14/

Answer 2

或者您可以將事件分別附加到按鈕和搜索字段。

$('.searchBTN button').mouseover(function() { 
     $('.searchHolder').filter(':not(:animated)').animate({ 
     height: 80 
     }, 'slow'); 
}); 
$('.searchHolder').mouseout(function() { 
     $('.searchHolder').animate({ 
      height: 0 
     }, 'slow'); 
}); 

https://jsfiddle.net/yjr819uk/