焦点不起作用

Question

我有以下代码：JSBin。

我希望两个柔性盒最初以灰色为背景，一旦我们点击一​​个盒子，它的整个背景就会变成白色。 .flex-box .col textarea:focus按预期工作，而.flex-box .col:focus不起作用：文本的背景颜色（例如html，css）始终为灰色。

有谁知道什么是错的？

.flex-box {
  display: flex;
  width: 100%;
  margin: 0;
  height: 300px;
}
.flex-box .col {
  border: 1px solid green;
  flex: 1;
  overflow-y: auto;
  overflow-x: hide;
  background: #F7F7F7;
}
.flex-box .col textarea {
  position: relative;
  width: 100%;
  height: 100%;
  resize: none;
  border: 0;
  font-family: monospace;
  background: #F7F7F7;
}
.flex-box .col:focus {
  background: white;
}
.flex-box .col textarea:focus {
  outline: none;
  background: white;
}

<div class="flex-box">
  <div class="col" id="html-panel">
    <h2>html</h2>
    <textarea name="html"></textarea>
  </div>
  <div class="col" id="css-panel">
    <h2>css</h2>
    <textarea name="css"></textarea>
  </div>
</div>

修改1：

实际上，一旦我们点击了一个盒子的文本区域，我希望它的标题背景也会变得白色。使用JavaScript设置事件监听器让我很烦（因为我已经有几个事件监听器）。单凭CSS是不是有办法实现这一点？

Answer 1

这是因为textarea得到的:focus不是div。仅使用CSS实现结果的一种方法是为背景添加额外的div，并在textarea聚焦时使用兄弟选择器。

＆＃13;

＆＃13;

.flex-box {
  display: flex;
  width: 100%;
  margin: 0;
  height: 300px;
}
.flex-box .col {
  border: 1px solid green;
  flex: 1;
  overflow-y: auto;
  overflow-x: hide;
  background: #F7F7F7;
  Position: relative;
}
.flex-box .col textarea {
  position: relative;
  width: 100%;
  height: 100%;
  resize: none;
  border: 0;
  font-family: monospace;
  background: #F7F7F7;
  Z-index: 1;
}
.flex-box .col label {
  display: block;
  font-size: 2em;
  font-weight: bold;
  padding: 10px;
  position: relative;
  Z-index: 1;
}
.flex-box .col:focus {
  background: white;
}
.flex-box .col textarea:focus {
  outline: none;
  background: white;
}
.flex-box .col .background {
  Position: absolute;
  Top: 0;
  Left: 0;
  Right: 0;
  Bottom: 0;
  Height: 100%;
  Width: 100%;
  Z-index: 0;
}
.flex-box .col textarea:focus ~ .background {
  background: white;
}

＆＃13;

<div class="flex-box">
  <div class="col" id="html-panel">
    <label for="html">html</label>
    <textarea id="html" name="html"></textarea>
    <div class="background"></div>
  </div>
  <div class="col" id="css-panel">
    <label for="css">css</label>
    <textarea id="css" name="css"></textarea>
    <div class="background"></div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;