鼠标悬浮覆盖元素后，以前使用js的mouseover和mouseout添加监听事件可以实现交互。现在可以使用CSS中的:hover选择器提高性能。:hover选择器可以针对不同的HTML元素，在鼠标悬停时改变元素（也可以是子元素、同级元素、就近元素）的样式，增强网页的互动性和用户体验。
定义：
:hover 选择器用于选择鼠标指针浮动在上面的元素。
:hover 选择器适用于所有元素
基础用法：
这个表示的是：当鼠标悬浮在a这个样式上的时候，a的背景颜色设置为黄色
a:hover
{
background-color:yellow;
}
这个是最普通的用法了，只是通过a改变了style
进阶用法:
使用a 控制其他块的样式：
使@www.xuepai.net用a控制a的子元素 b：
.a:hover .b {
background-color:blue;
}
使用a控制a的兄弟元素 c(同级元素)：
.a:hover + .c {
color:red;
}
使用a控制a的就近元素d：
.a:hover ~ .d {
color:pink;
}
总结一下：
1. 中间什么都不加 控制子元素；
2. ‘+’ 控制同级元素(兄弟元素)；
3. ‘～’ 控制就近元素；