jQuery搜索框和按鈕

Question

我有一個按鈕和文本框，當您將鼠標懸停在按鈕上時，將使用以下JavaScript / jquery出現搜索框：

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

但是，此刻，一旦將鼠標懸停在按鈕上，它將顯示文本框，但是當您嘗試將鼠標懸停在文本框上時，它將消失。 當您也將文本框懸停在頁面上時，有沒有辦法使文本框保留在頁面上。

這是描述問題的小提琴

Answer 1

您不需要Jquery。 CSS樣式將為您做到這一點！

通過將內容包裝在一個元素中，可以顯示/隱藏包裝器中的任何（/所有）元素。 我在下面做了一個基本的演示：

請注意 .search類的padding / background僅用於演示，可以對其進行編輯/刪除，並且仍保留其功能。

 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的答案

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/

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

Answer 4

刪除第二個功能。 這是hoveroverout。 使用以下內容：

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