我有一个按钮和文本框,当您将鼠标悬停在按钮上时,搜索框将使用这段 JavaScript/jquery 出现:
$('#search-button').hover(function () {
$('#search-text').show();
}, function () {
$('#search-text').hide();
});
但是目前,一旦您将鼠标悬停在按钮上,它就会显示文本框,但一旦您尝试将鼠标悬停在文本框上,它就会消失。有没有一种方法可以让文本框在您将鼠标悬停在页面上时也保留在页面上。
Here is a Fiddle描述问题
最佳答案
为此您不需要 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
关于javascript - jquery搜索框和按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28024919/