Question

我有以下

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

每当textarea成为焦点时，我想设置comment-wrap div的样式。我试过了：

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

这不起作用。关于如何在textarea处于焦点时设置comment-wrap div的样式的任何想法，这意味着光标在textarea中闪烁并且用户可以键入？

由于

Answer 1

不确定#hallPost-inner是什么，但一般来说CSS选择器无法提升，这意味着您需要拥有textarea:focus选择器，但是需要设置祖先元素的样式，这不能在CSS。 Here's这是一个很好的资源，其中包括许多其他资源。该链接显示了如何实现简单的JavaScript解决方案。

Answer 2

使用JavaScript和jQuery，你可以这样做：

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

Answer 3

使用伪选择器:focus-within。请注意，任何焦点儿童都会影响父母。如果您有更多的孩子，并且只想在活动到达<textarea>时申请，您将需要JS。

例：

＆＃13;

form{
  padding: 20px;
  background-color: gainsboro
}

input{
  text-align: center
}

form:focus-within {
  background-color: yellow
}

＆＃13;

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

＆＃13;