純CSS選擇器控制子元素或兄弟元素的hover效果

一般 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>