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

【问题标题】：When search input is :focus make the surrounding div black当搜索输入为 :focus 时使周围的 div 变黑
【发布时间】：2013-10-29 18:06:03
【问题描述】：

在我的网站unbotttled.com

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

【问题讨论】：

如果您发布了一些很棒的 html/css，我不应该通过挖掘您的网站来隔离问题。

标签： javascript css forms search

【解决方案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/

【讨论】：

【解决方案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
}

类似的东西应该可以工作。

【讨论】：