悬停div来改变另一个div的css

Question

我正在尝试在鼠标悬停在另一个div上时更改文本的颜色。

使用jsFiddle **：

可以更好地解释

我想做什么（使用CSS）当我在第一个cicle上移动鼠标时，它会改变文本的颜色（结果1）。

我尝试过在stackoverflow上搜索之前的问题，使用类似的东西：

div.circleoff:hover ~.test {
    color: #fff
}

Answer 1

Eric Meyer在他的网站上有一些演示，这将有助于解决这个问题。看看'弹出'部分。它可以轻松调整以适应这一点。

meyerweb | css/edge

Answer 2

您需要检查css选择器的specificity。此外，您不应该使用兄弟运算符。我认为this就是你要做的（用下面的代码替换最后两条规则）。

#schema div.circleoff:hover + .circleoff2 .test,
#schema div.circleon:hover + .circleoff2 .texte {
  color: #fff
}

Answer 3

如果您正在寻找嵌套元素（不是兄弟元素）的颜色变化，请使用

#schema>div:hover span { color:white; }

这意味着将鼠标悬停在#schema的直接子元素（div元素元素）上会导致其所有嵌套span变为白色。

jsfiddle