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

Question

我在我的网站上使用搜索表单（我无法更改 HTML 结构，因为它是由 Wordpress 生成的搜索表单）。我有一个搜索图标，我的搜索表单是隐藏的。当鼠标输入搜索 div 时，我想切换我的搜索表单，在内部输入文本时搜索表单保持可见，当鼠标移出 divs 时，我希望搜索表单隐藏，动画与我的 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()，因为它不执行任何动画（您宁愿 stop 输入字段动画：$("#s").stop().animate(...)） .

one is used to execute an event handler only once. After the event is catched, it's immediately removed from the element and will not perform anymore. You don't want that for sure. If you need an event delegation use 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 的 shorthand）：

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

其他参考资料：

.is();

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

toggle search input when mouseenter a div, then hide search input when mouseout

jquery

forms

toggle

mouseover

mouseout