javascript - jQuery 问题 :not selector

Question

我有一个搜索图标，将鼠标悬停在该图标上时会显示一个输入文本搜索框。我使用 jQuery 向输入添加一个类，以在搜索图标悬停时显示文本框。效果很好。

下一个功能是，如果用户决定不单击搜索框和页面上的其他位置，搜索框就会消失。这也工作得很好。

唯一剩下的问题是，如果用户单击搜索框，它也会消失，这是我不希望的。

我的 HTML:

<input type="text" class="form-text text-hidden" title="Enter the terms you wish to search for." value="" size="15" id="edit-search-block-form-1" name="search_block_form" maxlength="128">

<input type="image" src="http://d3j5vwomefv46c.cloudfront.net/photos/large/802431483.png?1377197793" class="form-submit search-hover" alt="Search" id="edit-submit">

我的 jQuery:

$(".search-hover").hover(function () {
    $('.text-hidden').addClass('hover');
  });

  // Now remove the class in case of a false start or the user decides to do something else.
  $("body:not(.text-hidden)").click(function(){
      //alert('The body click is working!!!');
    $('.form-text.text-hidden').removeClass('hover');
  });

请注意，我尝试使用 :not 选择器来指示仅在单击搜索框以外的任何位置时删除 hover 类，但它不起作用。

I've got a fiddle here

Answer 1

尝试

jQuery(function(){
    $(".search-hover").hover(function () {
        $('.text-hidden').addClass('hover');
    });

    // Now remove the class in case of a false start or the user decides to do something else.
    $("body").click(function(e){
        //alert('The body click is working!!!');
        if($(e.target).closest('.text-hidden').length == 0)
            $('.form-text.text-hidden').removeClass('hover');
    });
})

演示:Fiddle