当鼠标进入 div 时切换搜索输入，然后在鼠标移出时隐藏搜索输入

Question

我在我的网站上使用搜索表单（我无法更改 HTML 结构，因为它是由 Wordpress 生成的搜索表单）。 我有一个搜索图标，我的搜索表单是隐藏的。 当鼠标进入搜索 div 时，我想切换我的搜索表单，当在其中输入文本时搜索表单保持可见，当鼠标移出 div 时，我希望搜索表单隐藏，与我的 Jsfiddle 中的动画相同。

我找不到解决办法。这是我的 HTML，我无法更改结构，因为它是 Wordpress 生成的搜索表单：

<div id="search">
<form action="http://www.mmdwc.com" id="searchform" method="get">
<div>
<button type="submit" class="btn"  id="searchsubmit"><i class="fa fa-search"></i></button>
<input type="search" id="s" name="s" value="" />
</div>
</form>    
</div>  

我的 CSS ：

body {margin-top:50px;background-color:black;text-align:right}

#search {
    display: inline-block;
    border-right: 1px solid #D3D3D3;
    margin-right: 10px;
    vertical-align: middle;
    padding-right: 5px;
}

#s {
    border-width: medium medium 1px;
    border-style: none none solid;
    border-color: -moz-use-text-color -moz-use-text-color #FFF;
    -moz-border-top-colors: none;
    -moz-border-right-colors: none;
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    border-image: none;
    background-color: #000;
    color: #D3D3D3;
    line-height: 12px;
    font-style: italic;
    margin-left: 5px;
    margin-right: 5px;
    display: none;
}

#searchsubmit {
    background-color: transparent;
    color: #FFF;
    border: medium none;
    cursor: pointer;
    font-size: 16px;
    margin-right: -5px;
}

还有我的 jquery：

$( "#searchsubmit" ).stop().one( "mouseenter", function() {
    $("#s").animate({width: 'toggle'}, 200);
});

和一个 JSfiddle 来查看它的实际效果（带有动画）：

http://jsfiddle.net/7hbp57my/

谁能帮我解决这个问题？

非常感谢您的帮助

Answer 1

您不应该单独使用mouseenter，或者至少不应该与toggle 动画一起使用。
使用mouseenter，您还必须将mouseleave 事件设置为相反的操作。

您应该在其上附加事件处理程序的元素是整个 #search div，而不是按钮。

按钮不需要.stop()，因为它不执行任何动画（您宁愿停止输入字段动画：$("#s").stop().animate(...)）。

one 仅用于执行事件处理程序一次。事件被捕获后，它会立即从元素中删除并且不再执行。你肯定不想要那个。如果您需要event delegation，请改用on。

---

// cache input element (good practice when you refer to the same object many times):
var s_field = $("#s");

// hover instead of mouseenter:
$( "#search" ).hover(
// on mouse over:
function() {
    // use 'show' instead of toggle:
    s_field.stop().animate({width: 'show'}, 200);
}, 
// on mouse out:
function(){
    // hide input field on "hover out" only when it has no focus:
    if(!s_field.is(":focus")){
        s_field.stop().animate({width: 'hide'}, 200);
    }
});

可选地，您可以通过绑定focusout 事件处理程序，在从字段中移除焦点时隐藏搜索元素（并清除其值）：

s_field.focusout(function(){
    // check if mouse pointer is over the element
    // otherwise search field will disapear before button is clicked
    if(!$( "#search" ).is(":hover")){
        s_field.val('').animate({width: 'hide'}, 200);
    }
});

JSFiddle

---

为了更好地理解 jQuery 的 .hover() 处理程序（mouseenter 和 mouseleave 的简写等效项）：

$(element).hover( handlerIn, handlerOut );

其他参考资料：

• .is();