javascript - jQuery：淡入文本输入，保持可见直到不活动

Question

我基本上尝试实现的是：将鼠标悬停在.header-logo图像上，将淡出此图像并淡入#header-search文本输入字段。这个想法是该#header-search字段在它处于活动状态时保持可见，即您正在输入它，或者如果您单击文档中的其他位置，它会淡出。
这是一个 jsfiddle 演示：http: //jsfiddle.net/neal_fletcher/2SNf6/
HTML：

<img class="header-logo" src="http://placekitten.com/160/50" />
<input id="header-search" type="text" />

jQuery：

$(document).ready(function() {

    $('.header-logo').mouseenter(function() {
        $('.header-logo').stop(true, true).fadeOut();
        $('#header-search').stop(true, true).fadeIn();
        });

    $('.#header-search').mouseleave(function() {
        $('#header-search').stop(true, true).fadeOut();
        $('.header-logo').stop(true, true).fadeIn();
        });    
});

这是可能吗？我不确定它是如何实现的。任何建议将不胜感激！

Answer 1

它是一个错字 - 将 .#header-search 替换为 #header-search。此外，您不需要停止方法即可使其工作。

`$(document).ready(function() {

$('.header-logo').mouseenter(function() {
    $('.header-logo').fadeOut();
    $('#header-search').fadeIn();
    });

$('#header-search').mouseleave(function() {
    $('#header-search').fadeOut();
    $('.header-logo').fadeIn();
    });    

});`