css:hover状态改变另一个元素样式的使用
2021-11-15 本文已影响0人
xiesen
hover
情景一：两个是兄弟元素
情景二：两个是父子元素
情景三：两个是兄弟元素,改变的是一个兄弟元素的子元素
情景四：设置多个同级元素的样式
<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;
}
/* 情景四：设置多个同级元素的样式 */
.block:hover {
background-color: blue;
}
#blocks:hover .block:not(:hover) {
background-color: yellow;
}
</style>
<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>
<!-- 情景四：设置多个同级元素的样式 -->
<div id="blocks">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
</body>
