CSS3 - 聚焦父元素的样式[重复]

Posted 2023-03-06

【中文标题】CSS3 - 聚焦父元素的样式[重复]

【英文标题】：CSS3 - style on focused parent element [duplicate]

【发布时间】：2013-07-31 04:57:13

【问题描述】：

我知道我可以像这样在焦点输入元素上设置样式：

input:focus
 
  background-color:yellow;

但是当输入有焦点时，是否有可能在父元素上设置样式？ 例如

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

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

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

但是，有人能解释一下它是如何工作的吗？

【参考方案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/

【讨论】：

太棒了，如果父级已经包含一个特定的类，有没有办法只将该类应用到父级？例如如果父级有“input-append”和/或“input-prepend”类？

当然，只需将类作为参数添加到 .parent() 选择器，例如 $(this).parent('input-append').addClass('active');

【参考方案2】：

没有。 CSS 中没有父选择器，因此当父元素之一悬停时（或基于任何子元素条件），您无法在父元素上触发样式规则。为此，您需要使用 javascript。