我有一个搜索图标,将鼠标悬停在该图标上时会显示一个输入文本搜索框。我使用 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
类,但它不起作用。
最佳答案
尝试
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
关于javascript - jQuery 问题 :not selector,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18419558/