纯CSS选择器控制子元素或兄弟元素的hover效果

hoover.png 纯CSS选择器控制子元素或兄弟元素的hover效果 HTML笔记

一般 hover 效果只用在自身元素和控制子元素，那么可以直接用 CSS 控制兄弟元素的 hover 效果吗？

答案是可以的，不过只能控制相邻的元素，具体示例代码如下：

1、如果 #b 元素是 #a 元素的子元素，可以直接通过 #a:hover #b {...} 这种方式来控制。

示例代码如下：

<style>
    #a:hover #b{
        color:green;
    }
</style>

2、#b 与 #c 是亲兄弟关系，有相同的父节点，且 #b 跟 #c 相邻，可以通过 #b:hover + #c{...} 来控制 #c 的样式。

当鼠标移到 #b 时，#c 的样式就会改变。

示例代码如下：

<style>
    #b:hover + #c{color : red;}
</style>

HTML元素：

<div id='a'>元素1
    <div id='b'>元素2</div>
    <div id='c'>元素3</div>
</div>