我有一个搜索图标,当悬停在上面时会显示一个输入文本搜索框。我正在使用 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
单击搜索框以外的任何位置但它不起作用时才删除该类。