当文本区域处于焦点时，CSS 如何设置父项的样式？

Question

我有以下内容

<div class="comment-wrap">
 <textarea></textarea>
</div>

每当文本区域处于焦点时，我想设置评论换行 div 的样式。我试过了：

#hallPost-inner + textarea:focus {
    background: red;
}

这不起作用。关于如何在文本区域处于焦点时设置评论换行 div 的样式（意味着光标在文本区域中闪烁并且用户可以键入）有什么想法吗？

谢谢

Answer 1

不确定 #hallPost-inner 是什么，但一般来说 CSS 选择器不能上升，这意味着您需要有 textarea:focus 选择器，但随后需要设置样式祖先元素，这是 css 中无法完成的。 这里是一个很好的资源，还有许多其他资源。该链接还展示了如何实现简单的 JavaScript 解决方案。

Answer 2

使用伪选择器 :focus-within。请注意，任何获得焦点的子项都会影响父项。如果你有更多的孩子并且只想在事件触发 </code> 时申请，你将需要 JS。

更多详细信息的链接。 (css-tricks)

例如：

form{
  padding: 20px;
  background-color: gainsboro
}

input{
  text-align: center
}

form:focus-within {
  background-color: yellow
}

<form>
  <input type="text" placeholder="name">
  <input type="text" placeholder="lastname">
  <input type="button" value="Go!">
</form>

注意：并非所有浏览器都支持 :focus-within

Answer 3

使用 JavaScript 和 jQuery，您可以执行以下操作：

$("textarea").live("focus", function(e) {
    $(this).closest(".comment-wrap").css({
        "background": "red"
    });
});