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

Posted

技术标签:

【中文标题】使用 CSS 更改兄弟悬停时的元素样式【英文标题】:Changing element style on sibling hover with 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>

我希望&lt;h1&gt; 变成蓝色,例如当页脚悬停时。我知道我可以用 javascript 做到这一点,但我想知道你是否知道一些 CSS 技巧来做到这一点。

谢谢!

【问题讨论】:

我不确定 CSS3,但在标准 CSS 中,除非页眉是页脚的子元素,否则您不能这样做。 使用纯 CSS,我不相信这是可能的,但我可能错了。 @Justin Satyr:CSS3 选择器现在可以被视为“标准 CSS”,因为几个月前该模块已标准化为 W3C 推荐标准。 【参考方案1】:

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

【讨论】:

你可能是对的。我最接近解决方案的是:jsfiddle.net/bVPqx/1。但是在选择器中切换 div 和 h1 角色是不行的。 在选择器中切换角色是什么意思? 使用 "#e h1:hover~#footer" 可以,但使用 "#e #footer:hover~h1" 不行:jsfiddle.net/bVPqx/3【参考方案2】:

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

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

【讨论】:

【参考方案3】:
#e1:hover 
      color:red;


#main, #footer
    color:black 

另一种选择。

【讨论】:

以上是关于使用 CSS 更改兄弟悬停时的元素样式的主要内容,如果未能解决你的问题,请参考以下文章

js如何给目标元素的兄弟元素更改样式

将父元素悬停到子标签元素后如何更改相同的css样式?

在 CSS 悬停事件中,我可以更改另一个 div 的样式吗? [复制]

CSS样式:悬停时如何更改图像?

在 Bootstrap 中更改悬停效果和字段选择的样式

在 CSS 悬停事件中,我可以使用淡入淡出更改另一个 div 的样式吗?