html - 获得焦点时为父元素应用样式

Question

 **CSS**

    #child:focus > #parent {
    color: white;
    } 

    **HTML**
    <div id="parent">
        <div id="child">
        </div>
    </div>

当 child 专注时，这是为 parent 应用样​​式的正确方法吗？

编辑:我的问题是我需要为小型设备应用这些样式。所以我不能使用 Jquery。这就是为什么我在 css 的媒体查询中尝试。

Answer 1

首先，您需要为您的 div 添加一个 tabindex 属性，否则它们永远无法获得焦点。

我还包含了当子项失去焦点时从父项中删除 CSS 类的代码。

$("#child").focusin(function() {
  $(this).parent().addClass("focused");
});
$("#child").blur(function() {
  $(this).parent().removeClass("focused");
});

.focused {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="parent" tabindex="-1">
  Parent Top
  <div id="child" tabindex="-1">
    Child
  </div>
  Parent Bottom
</div>