jquery搜索框和按钮

Question

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

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

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

这是一个描述问题的小提琴

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