html - 当子元素具有焦点时，如何使 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当它的任何一个 child 获得焦点时改变背景颜色？

这是一个 fiddle .

Answer 1

对此没有 CSS 解决方案。但是，您可以使用 jQuery 实现这一点。

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

这是 Fiddle