关于hover的一些问题

父类hover改变子类

html

    <div id="sibling">Sibling</div>    <div id="brother">      <span>Brother</span>      <div id="child">Child</div>    </div>

---

css

#sibling:hover + #brother #child {    background-color:red;}

或

#brother:hover > #child {    background-color:red;}

或

#brother:hover  #child {    background-color:red;}  //注意：此种方法在同类hover改变时没有作用

---

效果

DEMO

---

同类hover改变兄弟

html

<div id="sibling">Sibling</div><div id="brother">    <span>Brother</span>    <div id="child">Child</div></div>

---

css

#sibling:hover + #brother {    background-color:red;}

#sibling:hover #brother {    background-color:red;}  //此种方法不起作用

---

解释

“+”用于同类hover兄弟之间的改变（具有同一个父亲）
“>”或 “空格”用于父亲hover改变后代
（或者可以说，“+”表示同级关系；“>”和“空格”表示后代关系）

---

注意

• 兄弟元素之间的hover是否生效，与html中元素的排列有关

例

css

<style>    #a {color : #99ff66;}    #a:hover + #b{color : pink;}    #a:hover + #c{color: orange;}</style>

html

<div id='a'>元素1</div><div id='c'>元素3</div><div id='b'>元素2</div>  //仅有元素3变色

<div id='a'>元素1</div><div id='b'>元素2</div>  //仅有元素2变色<div id='c'>元素3</div>

<div id='b'>元素2</div>  //元素2，3都不变色<div id='c'>元素3</div><div id='a'>元素1</div>

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

所以，只有被hover的div下面紧邻的第一个兄弟div能被改变

---

• “x:hover”中, ‘x’, ‘:’, ‘hover’之间不能有空格！！！！否则hover失效

---

引用改编自stackoverflow
引用自兄弟级别的hover控制
2017年9月26日08:07:55