javascript - 当输入文本成为焦点时如何显示父表单？

我希望有一个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：

最佳答案

DEMO

您可以使用jQuery焦点和模糊事件。

像这样：

$('.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;
}