javascript - 将 CSS 应用于焦点上的输入容器

Question

我有一个 div，里面有一个输入字段和一个按钮。我希望在用户专注于输入之前隐藏该按钮。

我曾尝试在包含的 div 上使用 :focus 伪类，因为我认为它会在关注输入时被继承，但它没有用。

这是我的html

<div class="search">
    <input type="text" placeholder="Search..." />
    <button type="submit">Search</button>
</div>

这是我已经尝试过的 css

.search button {
    display: none;
}

.search:focus button {
    display: block;
}

没有 JavaScript 可以做到这一点吗？

Answer 1

在这种情况下，您可以使用 adjacent sibling combinator, + .

Example Here

.search input:focus + button {
    display: block;
}

作为FelipeAls points out , 但是，如果焦点被移除，您将无法单击该按钮。因此，您还可以做这样的事情:

Example Here

.search button:hover,
.search button:focus {
    display:block;
}