鼠标悬浮事件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>
总结：
- 空格就是控制其子元素
- ‘+‘，就是控制其相邻的兄弟元素
- ’~‘，就是控制其普通的兄弟元素
