用+拼接单个同级元素 用~拼接多个同级元素
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>如何使用hover同时让多个元素发生变化</title>
<link rel="stylesheet" href="css/demo.css">
</head>
<body>
<div></div>
<p></p>
<span></span>
<span></span>
<span></span>
</body>
</html>
设置简单样式
/* CSS Document */
div{
width: 100px;
height: 100px;
background: red;
}
p{
width: 100px;
height: 100px;
background: blue;
}
span{
display: block;
width: 100px;
height: 100px;
background: purple;
}
接下来我们看看hover（伪类）该如何使用呢
div:hover{
background: #C1841F;
}
div:hover + p{
background: #AB520E;
}
div:hover~span{
background: #15B7AA;
}
只能操纵相邻的兄弟元素,也可操纵相邻同级元素的子元素 不相邻的同级元素不能操纵
2528
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
