CSS :hover选择器的使用

定义

:hover 选择器，用于选择鼠标指针浮动在上面的元素

:hover选择器适用于所有元素

用法

用法一

a:hover {
    background-color: yellow;
}

效果：当鼠标悬浮在a元素上时，a的背景颜色设置为黄色

用法二

使用 a 控制其他块的样式

子元素

使用 a 控制 a 的子元素 b ：

a:hover b {
    background-color:blue;
}

兄弟元素

使用 a 控制 a 的兄弟元素 c(同级元素)

a:hover + c {
    background-color:blue;
}

就近元素

使用 a 控制 a 的就近元素 d

a:hover ~ d {
    background-color:blue;
}

总结

:hover用于选择鼠标悬停其上时的元素

• 空格：控制子元素
• +：控制同级(兄弟)元素
• ~：控制就近元素