css:hover状态改变另一个元素样式的使用
效果演示
/* 情景一：两个是兄弟元素 */
兄弟元素
/* 情景二：两个是父子元素 */
父元素的子元素
/* 情景二：两个是兄弟元素,改变的是一个兄弟元素的子元素 */
兄弟元素的子元素
附加代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>css:hover状态改变另一个元素样式的使用</title>
<style>
.box {
width: 150px;
height: 150px;
background-color: #069;
line-height: 150px;
text-align: center;
margin: 20px 0;
color: #FFF;
}
.change {
font-size: 20px;
color: #0cf;
}
/* 情景一：两个是兄弟元素 */
.box:hover+.change {
color: red;
}
/* 情景二：两个是父子元素 */
.box:hover .change {
color: red;
}
/* 情景二：两个是兄弟元素,改变的是一个兄弟元素的子元素 */
.box:hover+#c>.change {
color: red;
}
</style>
</head>
<body>
<!-- 情景一：两个是兄弟元素 -->
<div class="box"></div>
<div class="change">兄弟元素</div>
<!-- 情景二：两个是父子元素 -->
<div class="box">
<span class="change">父元素的子元素</span>
</div>
<!-- 情景二：两个是兄弟元素,改变的是一个兄弟元素的子元素 -->
<div class="box"></div>
<div id='c'>
<div class="change">兄弟元素的子元素</div>
</div>
</body>
</html>
补充：
css 提供的兄弟节点选择器有两种
- 第一种：+ 相邻兄弟选择器（ li + li ）只能选择与自己紧紧相连的身后的一个兄弟。
- 第二种：~ 通用兄弟选择器（ li ~ li ）只可以选择在自己身后的所有li小弟。
原文地址：https://www.cnblogs.com/don-yang/p/9468958.html
