如何让 div/container 在子元素获得焦点时改变背景颜色？

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

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

这是Fiddle

但是，要回答您的问题，没有纯粹的 CSS 解决方案来使 div bg 颜色在其子项获得焦点时发生变化。

Answer 2

对此没有 CSS 解决方案。但是，您可以通过使用 jQuery.

来实现

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

这是Fiddle

Answer 3

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

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

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

不过，就我个人而言，我更愿意使用 "focus" class:

$(".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 more informative than 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/container 在子元素获得焦点时改变背景颜色？

How to make div/container change background color when child element has focus?

html

css

focus