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。你也不需要使用stop方法来使它工作。

`$（document）.ready（function（）{

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

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

}）;`

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

1 个答案: