jquery搜索框和按钮

jquery search box and button

本文关键字：按钮 搜索 jquery      更新时间：2023-09-26

我有一个按钮和文本框，当你将鼠标悬停在按钮上时，搜索框将使用这段JavaScript/jquery出现：

    $('#search-button').hover(function () {
    $('#search-text').show();
}, function () {
    $('#search-text').hide();
});
但是，一旦您将鼠标悬停

在按钮上，它将显示文本框，但是一旦您尝试将鼠标悬停在文本框上，它就会消失。有没有办法让文本框在将鼠标悬停在页面上时也保留在页面上。

这是描述问题的小提琴

你不需要

Jquery。Css样式将为您做到这一点！

通过将内容包装在元素中，您可以在包装器中显示/隐藏任何（/all）元素。我在下面做了一个基本的演示：

请注意，.search类上的填充/背景仅用于演示，可以编辑/删除并仍保留其功能。

button {
  display: none;
}
.search:hover button {
  display: inline-block;
}
.search {
  background: gray;
  display: inline-block;
  padding: 10px;
}
<div class="search">
  <input type="text" placeholder="type here" />
  <button>SEARCH</button>
</div>

但是，如果你被迫使用Javascript/jquery，那么我不会在这里复制它，而是参考chipChocolate.py的答案。

一个针对您问题的 JavaScript 解决方案。检查这个jsfiddle链接：

http://jsfiddle.net/ea45h80n/

 $('.search').hover(function() {
   $('#search-text').show();
 }, function() {
   $('#search-text').hide();
 });
 $('#search-text').hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="search">
  <button>SEARCH</button>
  <input type="text" placeholder="type here" id='search-text' />
</div>

将hover事件附加到#search-button并#search-text。

$('#search-text').hide();
$('#search-button, #search-text').hover(function() {
  $('#search-text').show();
}, function() {
  $('#search-text').hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="search-text" type="text" /
><input id="search-button" type="button" value="Search" />

删除第二个函数。 这是悬停。 使用以下方法：

  $('#search-button').hover(function () {
$('#search-text').show();
});

这可能有效

$('#search-text').hide(); //on DOM Load hide the element   
$('#search-button').mouseover(function() 
{
    $('#search-text').show(); //When mouse enters the element, then show the textbox input
});


$('#search-button').hover(function () {
	$('#search-text').show();		
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
   <input type="button" id="search-button" value="search"/>
   <input type="text" id="search-text" style="display:none;"/>

相关文章：