Javascript jQuery:fadeIn文本输入，保持可见直到不活动

我基本上在尝试它实现的是：将鼠标悬停在

.header logo

图像上，将淡出该图像并淡入

#header search

文本输入字段。这样做的目的是，此

#标题搜索

字段在活动时保持可见，即您在其中键入，或者如果您在文档中的其他位置单击，则会淡出
这里有一个JSFIDLE演示：
HTML:

这有可能吗？我不确定这将如何实现。如有任何建议，将不胜感激

这是一个输入错误替换。#标题搜索与#标题搜索。此外，您不需要停止方法使其工作

`$（文档）.ready（函数（）{

---

}))`

像这样->@adeneo完美！为此干杯，把它作为一个答案，我会接受它。张贴它自己，并接受它，得到你几分！

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

$(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();
        });    
});

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

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