关于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失效

hover改变多个元素

当被hover的元素是要改变的多个元素的共同父亲时，hover才能生效；假如被hover元素与要改变的元素是兄弟，则多个hover不生效
例：
html

    <div id="out">
        <div id="wrapper">
            <div id="imgs">
                <img src="images/img1.jpg" alt="none" class="img"><img src="images/img2.jpg" alt="none" class="img"><img src="images/img3.jpg" alt="none" class="img">
            </div>
        </div>
        <div id="arrL"></div>
        <div id="arrR"></div>
        <div id="point">
            <div id="po1" class="po"></div>
            <div id="po2" class="po"></div>
            <div id="po3" class="po"></div>
        </div>
    </div>

css1（生效）

        #out:hover #arrL {
            opacity: 1;
        }

        #out:hover #arrR {
            opacity: 1;
        }

css2（不生效）

#wrapper:hover + #arrL{
    opacity: 1;
}
#wrapper:hover + #arrR{
    opacity: 1;
}

---

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