Question

我在搜索按钮外部的div中有一个搜索栏，用于在悬停时显示/隐藏搜索栏。我有搜索栏div动画但我需要帮助来改变jQuery，以便当用户将鼠标从按钮移开并进入框中时，搜索栏保持打开状态。

我做了一个小提琴来展示我拥有的东西，谢谢你的帮助。

我的HTML：

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

我的JS：

results

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

Answer 1

hover（容器div）上需要#navBar个活动，而不是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/

jQuery动画搜索栏悬停按钮

2 个答案: