使用 CSS 更改兄弟悬停时的元素样式答案

【问题标题】：Changing element style on sibling hover with CSS使用 CSS 更改兄弟悬停时的元素样式
【发布时间】：2012-01-22 12:49:49
【问题描述】：

我有以下结构：

<div id="e1">
  <h1>Header</h1>
  <div id="main">text text text text</div>
  <div id="footer">something</div>
</div>

我希望<h1> 变成蓝色，例如当页脚悬停时。我知道我可以用 Javascript 做到这一点，但我想知道你是否知道一些 CSS 技巧来做到这一点。

谢谢！

【问题讨论】：

【解决方案1】：

您的 h1 位于 #footer 之前，因此纯 CSS 无法实现，因为它不提供选择器来匹配前面的同级元素。

【讨论】：

【解决方案2】：

我以某种方式实现了它，不改变 html 结构和纯 CSS。

在 jsfiddle 中查看：http://jsfiddle.net/ijse/dhcqw/

【讨论】：

【解决方案3】：

#e1:hover {
      color:red;
}

#main, #footer{
    color:black 
}

另一种选择。

【讨论】：