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

Question

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

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

一旦我点击搜索，我怎么能修复它，或者允许我将鼠标悬停在文本框上，因为悬停在功能上的只是按钮。因此，尝试使用时，文本框将消失。

Answer 1

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

Answer 2

这样的东西？

EXAMPLE

当display: block触发#two状态时，它只为:hover设置#one