悬停在其他元素 CSS 上？答案

【问题标题】：hover on other element CSS?悬停在其他元素 CSS 上？
【发布时间】：2015-02-02 08:09:58
【问题描述】：

为什么 .a 的背景颜色在我悬停时没有改变？ .b?

CSS

.a {
    color: red;
}

.b {
    color: orange;
}

.b:hover .a {
    background-color: blue;
}

HTML

<div id="wrap">
    <div class="a">AAAA
    <div class ="b">BBBB</div>
    </div>
</div>

【问题讨论】：

【解决方案1】：

因为.a 不是后代或出现在.b 之后/内部，这是为它工作的条件

例如，如果你反转它，因为.b 是.a 的后代，它会起作用

.a:hover .b {
    background-color: blue;
}

【讨论】：

【解决方案2】：

当.a 是处于悬停状态的.b 的子级时，您正尝试选择它。这永远不会发生 .a 是 .b 的父级。

【讨论】：

【解决方案3】：

实际上，您正在尝试在子悬停时更改父级的背景，这是不可能的，因为它是 b 的父级，如果您在 a 悬停时更改 b 的背景颜色，那么它将起作用

.a:hover .b {
    background-color: blue;
}

【讨论】：

【解决方案4】：

您的 HTML 中也有错误 .a 不是后代

HTML：

<div id="wrap"> <div class="a">AAAA</div> <div class ="b">BBBB</div> </div>

CSS：

.a {
    color: red;
}
.b {
    color: orange;
}
.b:hover, .a:hover  {
  background-color: blue;

}

【讨论】：