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