悬停元素改变其他元素

Posted 2023-03-06

【中文标题】悬停元素改变其他元素

【英文标题】：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 选择器不可行，因为它们在浏览器中会影响性能。