鼠标悬浮事件hover的使用
用法1：
表示当鼠标悬浮在a元素上时，a元素的背景颜色变成粉色
.a:hover{
background-color: pink;
}
用法2：
用a来控制其他元素
- 用a来控制a的子元素
<style>
.a{
width: 100px;
height: 100px;
border: 1px solid black;
}
.b{
width: 50px;
height: 50px;
border: 1px solid red;
}
.a:hover{
background-color: pink;
}
.a:hover .b{
background-color: aqua;
}
</style>
<body>
<div class="a">
<div class="b">
</div>
</div>
</body>
</html>
- 用a来控制其相邻的兄弟元素
<style>
.a{
width: 100px;
height: 100px;
border: 1px solid black;
}
.b{
width: 50px;
height: 50px;
border: 1px solid red;
}
.c{
width: 100px;
height: 100px;
border: 1px solid blue;
}
.a:hover +.c{
background-color: aqua;
}
</style>
<body>
<div class="a">
<div class="b">
</div>
</div>
<div class="c">
</div>
</body>
</html>
- 用a来控制其普通兄弟元素
<style>
.a{
width: 100px;
height: 100px;
border: 1px solid black;
}
.b{
width: 50px;
height: 50px;
border: 1px solid red;
}
.c{
width: 100px;
height: 100px;
border: 1px solid blue;
}
.d{
width: 100px;
height: 100px;
border: 1px solid salmon;
}
.a:hover ~.d{
background-color: pink;
}
</style>
<body>
<div class="a">
<div class="b">
</div>
</div>
<div class="c">
</div>
<div class="d">
</div>
</body>
</html>
总结：
- 空格就是控制其子元素
- ‘+‘，就是控制其相邻的兄弟元素
- ’~‘，就是控制其普通的兄弟元素
