1）hover元素A 改变 元素A的子元素B0
( .elA:hover .elB0 { })
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.elA {
width: 550px;
height: 100px;
background-color: #eee;
}
.elB0 {
width: 300px;
height: 20px;
color: #ddd;
}
.elA:hover .elB0 {
background-color: #5b734a;
}
</style>
</head>
<body>
<div class="elA">元素A
<div class="elB0">元素B0:我是元素A的子元素</div>
</div>
</body>
</html>2）hover元素A 改变 元素A的相邻兄弟元素B1
( .elA:hover+.elB1 { })
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.elA {
width: 550px;
height: 100px;
background-color: #eee;
}
.elB0 {
width: 300px;
height: 20px;
color: #ddd;
}
.elB1 {
width: 300px;
background-color: #5b734a;
color: #ddd;
height: 0;
overflow: hidden;
transition: 1s;
position: absolute;
}
.elA:hover+.elB1 {
height: 200px;
}
</style>
</head>
<body>
<div class="elA">元素A
<div class="elB0">元素B0:我是元素A的子元素</div>
</div>
<div class="elB1">
元素B1:我挨着元素A
<div class="inner">
Lorem ipsum dolor sit amet consectetur adipisicing elit.<br>
Architecto officiis repudiandae natus dolores quos porro
eveniet eum temporibus aspernatur <br>commodi sapiente ab accusantium
dolorem nisi id nemo, obcaecati velit non.
</div>
</div>
</body>
</html>3）hover元素A 改变 元素A的非相邻兄弟元素B2
2种方法均可。
( .elA:hover~.elB2 { })
( .elA:hover+.elB1+.elB2 { })
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.elA {
width: 550px;
height: 100px;
background-color: #eee;
}
.elB0 {
width: 300px;
height: 20px;
color: #ddd;
}
.elB1 {
width: 300px;
background-color: #5b734a;
color: #ddd;
height: 0;
overflow: hidden;
transition: 1s;
position: absolute;
}
.elB2 {
width: 300px;
height: 100px;
margin: 180px;
line-height: 100px;
color: #ddd;
}
/* 以下2种方法可以选中元素elB2 */
.elA:hover~.elB2 {
/* .elA:hover+.elB1+.elB2 { */
background-color: #5b734a;
}
</style>
</head>
<body>
<div class="elA">元素A
<div class="elB0">元素B0:我是元素A的子元素</div>
</div>
<div class="elB1">
元素B1:我挨着元素A
<div class="inner">
Lorem ipsum dolor sit amet consectetur adipisicing elit.<br>
Architecto officiis repudiandae natus dolores quos porro
eveniet eum temporibus aspernatur <br>commodi sapiente ab accusantium
dolorem nisi id nemo, obcaecati velit non.
</div>
</div>
<div class="elB2">
元素B2:我和元素A中间隔着元素B1
</div>
</body>
</html>做个记录，如有不足，欢迎补充。
不要忽视你达成的每个小目标，它是你前进路上的垫脚石。冲！
标签：elA,hover,width,样式,元素,height,color From： https://blog.csdn.net/qq_54548545/article/details/140467403