hover对同级兄弟元素以及子集元素的操作_css 怎么给同级加上hover-CSDN博客

本文链接：https://blog.csdn.net/kehukehu_kehu/article/details/72307596

兄弟级别的hover控制

不使用JavaScript脚本，仅通过CSS来实现时有两种方法：

若元素#b是元素#a的子元素，则可以通过#a #b{……}来控制#b的CSS样式。
若#a与#b是亲兄弟关系，有相同的父节点，且#b紧跟在#a后面，则可通过#a + #b{……}来控制#b的CSS样式

下面给出方法二的例子：

例一

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
    <style>
        #a {color : #99ff66;}
        #a:hover + #b{color : #FF0000;}
    </style>
</head>
<body>
    <div id='a'>元素a</div>
    <div id='b'>元素b</div>
    <div id='c'>元素c</div>
</body>
</html>

注：若#b与#c调换，则对应的CSS样式设置不生效。

对子集元素和同级兄弟的子集元素的hover控制

可通过>和+来实现对子集元素、下一元素、下一元素的子集元素的CSS样式控制。

如下例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#a:hover {
    color: #FFFF00;
}
#a:hover > #b:first-child {
    color: #FF0000;
}
#a:hover > #b {
    color: #FF00FF;
}
#a:hover + #c {
    color: #00FF00;
}
#a:hover + #c > #d {
    color: #0000FF;
}
</style>
</head>
<body>
    <div id='a'>元素a
        <div id='b'>元素b</div>
        <div id='b'>元素b</div>
    </div>
    <div id='c'>元素c
        <div id='d'>元素d</div>
    </div>
</body>
</html>