Question

我有一个按钮和文本框，当您将鼠标悬停在按钮上时，将使用此JavaScript / jquery显示搜索框：

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

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

Here is a Fiddle来描述问题

Answer 1

你不需要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's answer

Answer 2

将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" />

Answer 3

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

http://jsfiddle.net/ea45h80n/

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 4

删除第二个功能。这是暂停的。使用以下：

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

Answer 5

这可能有效

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

Answer 6

$('#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;"/>

jquery搜索框和按钮

6 个答案: