javascript - 悬停悬停文本框在选中时保持固定

<分区>

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

这是我的代码:

$('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>

最佳答案

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

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

关于javascript - 悬停悬停文本框在选中时保持固定，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30126844/

上一篇：javascript - jQuery 在过滤器的先前内联样式之上添加内联样式

下一篇：jquery - 修复 Bootstrap 不等列高度

javascript - (CAKPHP) 突出显示产品表中的一行以进行比较(无需悬停)

javascript - 销毁 jquery 模态

html - 安装了导航栏但不能链接html上的页面

javascript - 使用主干时什么类型的功能在哪里？

jquery - 无法更改 jquery pnotify 插件的背景颜色

javascript - jQuery .each 在 Safari 上比 Chrome/Firefox 慢

jquery - 当一个元素动画进入时，动画另一个元素退出

javascript - 将html文本适当 chop 到固定大小的区域

javascript - 如何从点击功能中排除ID？