JQuery окно поиска и кнопка

Question

У меня есть кнопка и текстовое поле, при наведении курсора на кнопку в окне поиска будет отображаться с помощью этого куска JavaScript/JQuery:

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

Однако в тот момент, как только вы наведите курсор на кнопку, на экране появится текстовое поле, но как только вы попытаетесь навести курсор на текстовое поле, оно исчезнет. Есть ли способ, чтобы текстовое поле оставалось на странице, когда вы наводите на него тоже.

Here is a Fiddle описать проблему

Answer 1

вам не нужно Jquery для этого. Дизайн Css сделает это за вас!

Обернув содержимое внутри элемента, вы можете показать/скрыть любые (/ все) элементы внутри обертки. Я сделал основной демо ниже:

обратите внимание отступы/фон на .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

удалить вторую функцию. который находится на ходу. использовать следующие:

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

Answer 4

Это может работать

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

A яваскрипта решение вашей проблемы. Проверить эту ссылку: 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 6

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

<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;"/> \t \t