javascript - 当搜索输入为 :focus 时使周围的 div 变黑

Question

在我的网站unbottled.com

在菜单中，当我将鼠标悬停在搜索表单周围的 div 上时，它会变成黑色。我想要的是当输入字段被单击或聚焦时，即使我停止悬停，我也希望周围的 div 变黑。任何帮助将不胜感激。

Answer 1

您可以使用 jQuery 来查找它何时处于焦点并根据自己的喜好设置背景颜色：

HTML：

<div id="out"><form method="get" id="searchform" action="http://www.unbotttled.com/">
    <input type="text" class="field" name="s" id="s" placeholder="">

</form>
</div>

jQuery：

$('.field').focus(function() {
    $('#out').css('background-color','black');
});

小提琴：http: //jsfiddle.net/yZhC3/

Answer 2

据我所知，您将不得不为此使用javascript。

用jQuery：

$search = $('.my-search-bar-input'); 
$search.on(':focus', function () {
    $search.parent().addClass('.selected');
})
.on(':blur', function () {
    $search.parent().removeClass('.selected);
});

和CSS：

.my-search-container.selected, .my-search-container:hover {
    background-color: #333; // Your color
}

像这样的东西应该工作。