悬停元素改变其他元素答案

【问题标题】：Hover element changes other element悬停元素改变其他元素
【发布时间】：2015-01-15 08:09:49
【问题描述】：

当我注意到这个问题时，我正在使用悬停练习我的 css，当我将鼠标悬停在顶部时，颜色会变为蓝色，中间会变为红色，但是当我将鼠标悬停到中间时，中间会变为红色，但是顶部仍然存在。

我尝试在中间添加一个 !important:hover 但它不起作用。我也删除了 + 号，但我认为它不会起作用，因为它应该在同一个 div 上才能起作用。

为什么当中间 div 悬停时，悬停对顶部 div 不起作用？

HTML

<div class="top">
    <p> HELLO WORLD </p>
</div>

<div class="middle">
    <p> HELLO PEOPLE </p>
</div>

CSS

.top:hover + .middle {
    color:red;
}

.top:hover {
    color:blue;
}

.middle:hover {
    color:red;
}

.middle:hover + .top {
    color: blue;
}

小提琴HERE

【问题讨论】：

不幸的是，您不能在 CSS 中执行此操作。您将需要 javascript。
对 CSS 中的 + 运算符有任何想法吗？？
+ 不起作用。你必须使用javascript 4。
.middle:hover + .top 表示.top 元素之后 .middle，而不是之前。
+ 选择紧跟在匹配第一部分的元素之后的元素（匹配选择器的第二部分，在+ 之后）并且是兄弟元素（不是子元素）。请参阅此处的specification。 Sample Fiddle .middle:hover + .top 可以工作。

【解决方案1】：

很遗憾，您无法在 CSS 中选择父元素。但是JavaScript可以用来解决这个问题。

查看这里以获取有关选择器的更多信息...http://www.w3.org/TR/CSS21/selector.html

【讨论】：

【解决方案2】：

CSS + 选择器是下一个兄弟选择器。它不适用于以前的兄弟姐妹，类似于您无法从孩子中定位父母。这是因为 CSS 从上到下工作（即父 > 子、下一个兄弟等），反之亦然。

article 解释了为什么 CSS 没有父选择器，但相同的逻辑适用于缺少以前的同级选择器。

tldr：自底向上 CSS 选择器不可行，因为它们在浏览器中会影响性能。

【讨论】：