将鼠标悬停在按钮显示的隐藏文本框上

Question

我正在尝试创建一个简单的搜索栏，一旦您将鼠标悬停在一个简单的按钮上，它就会在左侧显示一个文本框。我怎么能用 CSS 和 javascript 来解决这个问题呢？使用 David Fregoli 回复后，

$('#idofthebutton').hover(function () {
$('#idoftextbox').show();
}, function () {
$('#idoftextbox').hide();
});

我如何才能在点击搜索后修复它，或者允许我将鼠标悬停在文本框上，因为鼠标悬停功能仅在按钮上。因此，当尝试使用文本框时，文本框将消失。

Answer 1

是这样的吗？

EXAMPLE

当#one的:hover状态被触发

时，它只是为#two设置display: block

Answer 2

$('#idofthebutton').hover(function () {
    $('#idoftextbox').show();
}, function () {
    $('#idoftextbox').hide();
});