效果演示
css:hover状态改变另一个元素样式的使用
.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;
}
/* 情景一：两个是兄弟元素 */
兄弟元素
/* 情景二：两个是父子元素 */
父元素的子元素
/* 情景二：两个是兄弟元素,改变的是一个兄弟元素的子元素 */
兄弟元素的子元素
附加代码:
css:hover状态改变另一个元素样式的使用
.box {
width: 150px;
height: 150px;
