定义

: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用于选择鼠标悬停其上时的元素

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

Viva La Vida