Question

我有以下html：

<div class="mydiv">
    <p>some text here</p>
    <input type='text' />
</div>

...使用以下CSS：

.mydiv {
    background-color:yellow;
}

.mydiv:focus, .mydiv:hover {
    background-color:orange;
}

:hover正在适当地更改背景颜色，但:focus没有任何效果。这是因为<div>无法真正关注吗？

是否有一个CSS解决方案让.mydiv在其任何一个孩子获得焦点时改变背景颜色？

这是一个fiddle。

Answer 1

没有CSS解决方案。但是，你可以通过使用jQuery实现这一点。

$(".mydiv").children().focus(function() {
    $(this).parent().css("background-color", "orange");
}).blur(function() {
    $(this).parent().css("background-color","yellow");
});

以下是Fiddle

Answer 2

您必须将tabindex属性添加到元素需要可聚焦。

以下是Fiddle

但是，要回答你的问题，没有纯CSS解决方案可以让div bg颜色发生变化，如果它的孩子获得焦点。

Answer 3

使用jQuery时，我认为您最好使用focusin和focusout事件。

根据接受的答案改编的代码将成为：

$(".mydiv").focusin(function() {
    $(this).css("background-color", "orange");
}).focusout(function() {
    $(this).css("background-color","yellow");
});

但是，就个人而言，我宁愿使用＆＃34;焦点＆＃34;类：

$(".mydiv").focusin(function() {
    $(this).addClass("focus");
}).focusout(function() {
    $(this).removeClass("focus");
});

与组合选择器的css结合使用：

.mydiv.focus { background-color: orange }

P.S。一次，我发现the bit of docs on w3schools比the demo on api.jquery.com提供更多信息，这看起来让我感到困惑。

Answer 4

可能的CSS解决方案：

<style>
    #row1 {display: block; position: relative; width: 100%; background-color: #ffffff;  z-index: 150;}
    .BGmagic {display: none; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; background-color: #efefef; z-index: 200;}
    #inputone{display: block; position: relative; z-index: 250;}
    #inputone:focus + .BGmagic {display: block;}
    #inputone:hover + .BGmagic {display: block;}
</style>

<form>
    <div ID="row1">
        <p style="position: relative; z-index: 250;">First name:</p>
        <input ID="inputone" type="text" name="firstname">
        <div class="BGmagic"></div>
    </div>
</form>

如何在子元素有焦点时使div /容器改变背景颜色？

4 个答案: