Question

我希望有一个CSS选择器可以做到这一点，因为在javascript方面我是一个完整的菜鸟。

HTML基本上是这样的：

<div class="searchmenu">
 <form id="search">
  <fieldset>
   <input type="text" class="inputbox search"/>
  </fieldset>
 </form>
</div>

CSS就是这样：

.searchmenu form {
 display:none;
}

searchmenu:hover form {
    display:block;
}

当div悬停时，表单已经显示，现在我还希望它在输入文本处于焦点时保持显示。

我尝试搜索其他案例，但他们要么不适用于我的案件，要么我不知道如何实施它们D：

Answer 1

<强> DEMO

你可以使用jQuery焦点＆amp;模糊事件。

喜欢这样：

$('.inputbox').focus(function(){
    $('.searchmenu').addClass('is_focused');
});
$('.inputbox').blur(function(){
    $('.searchmenu').removeClass('is_focused');
});

<强> CSS：

.searchmenu form {
 display:none;
}
.searchmenu:hover form,
.searchmenu.is_focused form{
    display:block;
}
.searchmenu{
    background: #eee;
    padding: 10px;
}

Answer 2

将输入字段绑定到jquery事件例如

$(".inputbox .search").bind("focus keyup",function(){
$(".searchmenu").css("display","block");
});

我希望这会对你有所帮助

如何在输入文本处于焦点时显示父表单？

2 个答案: