css - 当文本框聚焦时阻止 div 向上滑动

Question

我正在尝试使应用程序的上部面板的 top 属性默认为 -80px，这样除了一小部分之外它是不可见的。当用户将鼠标悬停在该部分时，它会再次向下滑动。

问题是，这个div有一个文本框，我希望当用户在这个文本框上打字时div停止向上滑动，即使他移动鼠标指针离开，但不幸的是不知道该怎么做，这是我的代码:

index.html

<div id="taskInput">
    <div id="controllers">
         <input type="text" name="mainTask" id="mainTask">
         <button id="addMain">Add</button>
         <button id="resetMain">Reset</button>
    </div>       
</div>

这部分的CSS:

#taskInput {
    background: red;
    width:606px;
    height:43px;    
    padding: 22px;    
    box-shadow: 0px 3px 4px -3px black;
    position: absolute;    
    z-index : 0;
    top:0px;
}

script.js

$(function(){
    $("#taskInput").delay(400).animate({top:-80}, 500,function(){});
    $("#taskInput").mouseover(
        function(){
            $(this).stop().animate({top:0}, 200, function(){});            
        });

    $("#taskInput").mouseout(function(evt){                    
        $(this).stop().animate({top:-80}, 200, function(){});           
    })

    $("#mainTask").focus(function(){
        //i though i can put something here to stop mouseout event or something
    })
})

Answer 1

我改变了我的评论，没有必要取消绑定(bind)事件或使用全局变量来跟踪它。您可以使用document.activeElement获取页面上当前聚焦的元素，并将其 id 与 <input> 的 id 进行比较，像这样:

$("#taskInput").mouseout(function(evt){
    if(document.activeElement.id !== 'mainTask') {   
        $(this).stop().animate({top:-80}, 200, function(){});
    }            
});

Working DEMO