Question

我创建了一个搜索栏，当用户将鼠标悬停在按钮上时，会出现一个文本框。我想要做的是在用户按下文本框后保持文本框可见。因此，如果用户意外地将鼠标移到文本框或按钮上，同时键入文本框仍保留在同一位置。

这是我的代码：

JS

$('form').hover(function () {
   $('input[type="search"]').show();
}, function () {
   $('input[type="search"]').hide();
});

CSS

input[type="search"]{
display: none;
}

.search-style {
   width: 30px;
   height: 25px;
   background-color: #fff;
   background-image: url(http://localhost/themes/wp-    content/uploads/2015/04/saerch.png); 
  }

HTML

  <form>
   <input type="search" id="search" placeholder="Search goes here"/>
   <button class="search-style"></button>
   </form>

Answer 1

您可以在焦点事件中为输入控件添加一个类：

 $('input[type="search"]').focus(function(){
     $(this).addClass('active');
 })

然后，隐藏时，您可以检查输入是否处于活动状态.hasClass('active')：

$('form').hover(function () {
    $('input[type="search"]').show();
}, function () {
   if(!$(this).hasClass('active'))
      $('input[type="search"]').hide();
});

Answer 2

尝试包含此CSS：

input[type="search"][style]:focus{
   display: block !important;
}

选中时，悬停悬停文本框仍保持固定

2 个答案: