想让网页元素在鼠标滑过时有反馈？以前我们习惯用Ja vaScript的mouseover和mouseout事件来监听。但其实，很多简单的交互效果，用CSS的:hover选择器就能轻松搞定，而且性能往往更优。
:hover选择器的妙处在于，它不仅能改变当前元素的状态，还能“遥控”其子元素、同级元素或相邻元素的样式。这为增强页面互动性和用户体验，提供了非常灵活的方案。
定义：
简单来说，:hover选择器用于匹配鼠标指针正悬停在上方的那个元素。它是CSS众多伪类选择器里最常用、也最直观的一个。
这里有个好消息：几乎所有的HTML元素都可以使用:hover选择器，这意味着你的创意几乎不受限制。
基础用法：
我们从一个最简单的例子看起。下面的代码表示：当鼠标悬停在任何一个链接（标签）上时，它的背景色会变成黄色。
a:hover
{
background-color:yellow;
}
这是最基础的用法，仅仅改变了元素自身的样式。但真正的乐趣，才刚刚开始。
进阶用法:
用法一：控制子元素的样式
想象一下，你希望鼠标放在一个容器上时，能改变它里面某个子元素的样子。这完全可以实现。比如，当鼠标悬停在类名为“a”的元素上时，让其内部类名为“b”的子元素背景变蓝：
.a:hover .b {
background-color:blue;
}
注意，选择器“.a:hover”和“.b”之间是一个空格。这个空格，就是“父子关系”的钥匙。
用法二：控制同级元素（兄弟元素）
有时候，你想改变的不是“儿子”，而是紧挨着自己的“兄弟”。这时就需要用到相邻兄弟选择器“+”了。例如，让鼠标悬停在.a上时，紧随其后的那个.c元素文字变红：
.a:hover + .c {
color:red;
}
用法三：控制就近元素
如果目标元素不一定是紧挨着的下一个兄弟，而是后面所有的某个同级元素，那该怎么办？通用兄弟选择器“~”就派上用场了。它会选择所有跟在后面的指定同级元素。例如，让鼠标悬停在.a上时，后面所有.d元素的文字都变成粉色：
.a:hover ~ .d {
color:pink;
}
总结一下：
让我们快速回顾这三个进阶用法的核心区别：
1. 中间加空格 —— 用于控制其子元素；
2. 中间加‘+’ —— 用于控制其相邻的兄弟元素；
3. 中间加‘～’ —— 用于控制其后面的所有指定同级元素；
