是否可以在没有父母的情况下用 CSS 悬停在孩子身上？答案

【问题标题】：Is possible to hover on child with css without the parents?是否可以在没有父母的情况下用 CSS 悬停在孩子身上？
【发布时间】：2014-02-19 03:17:10
【问题描述】：

在 css 中有什么方法可以只选择没有父容器的悬停容器子容器，css 可以吗？

这就是我正在尝试的，应该选择最深的容器，而不是我添加的 .decor，它只是为了显示所选的 div。（这些孩子是动态添加的，没有类或 id）

这很简单，我知道用 javascript 可以轻松完成，但我想知道 css 中是否有选择器。

** jsFiddle **

HTML

<body>
<div class=container>
    <div class=decor> </div>
</div>
<div class=container>
    <div class=decor></div>
    <div class=container>
        <div class=decor></div>
    </div>
</div>
</body>

CSS

html,body{margin:0;}
*{box-sizing:border-box;}
.container {
    position:relative;
    width:100%;
    min-height:30px;
    padding:5%;
    border:4px solid blue;
}
.decor{
    position:absolute;
    top:1%;
    right:1%;
    height:10px;
    width:10px;
    padding:0;
    background-color:green;
}
.container:hover > .decor {
    background-color:red;
}

【问题讨论】：

当然。 .container > .decor:hover，和/或.container .decor:hover，和/或.container > div > .decor:hover。
您是否可以控制这些divs 的添加方式？如果是这样，那么请使用它们的类。此外没有 deepest 子选择器。
@cale_b 他真的是指.decor-divs吗？我认为动态添加的 div 没有任何 ID 或类。
我添加了它们以便示例更清晰，div 是由软件生成的。
@cale_b 装饰仅用于显示选择了哪个 div，我需要更改的是容器及其内部的所有内容，而不是父项。

标签： css hover css-selectors parent-child

【解决方案1】：

在您的情况下，我认为 :only-child 选择器可能会起作用。虽然我对.decor 元素感到困惑......

类似：

div:hover .decor:only-child {
  background-color:red;
}

这是完整的jsFiddle。

【讨论】：

不完全是，元素装饰只有在他的容器悬停时才会改变。在我的示例中，您可以看到当子元素悬停时，其父元素也会发生变化，这是不希望的。