Question

我知道我可以在聚焦的输入元素上设置一个样式，如下所示：

input:focus
{ 
  background-color:yellow;
}

但是当输入具有焦点时，是否可以在父元素上设置样式？ e.g。

<div class="foo">
      <input type="text />
      Hello
</div>

输入有焦点时，我可以影响“foo”样式吗？

编辑：可能重复Affecting parent element of :focus'd element (pure CSS+HTML preferred)

但是，有人可以解释一下它是如何运作的吗？

Answer 1

css中还没有父选择器。 http://css-tricks.com/parent-selectors-in-css/

但是，您可以使用jQuery选择它：

HTML

<div class="parent">
    <input type="text" />
</div>

css

.parent {
    /* parent styles */
}
.parent.active {
    /* do stuff when the input is hovered */
}

JS

// listen for a focus event on the input,
//  and then add a class to the parent
$('input').on('focus', function () {
    $(this).parent().addClass('active');
});

http://jsfiddle.net/M64nv/

Answer 2

没有。 CSS中没有父选择器，因此当父元素的一个后代悬停时（或基于任何子元素条件），您不能在父元素上触发样式规则。你需要使用Javascript。

CSS3 - 聚焦父元素的样式

2 个答案: