html中CSS:hover选择器改变子元素、同级元素、就近元素的样式

封印住的燕青

目录

• 定义：
• 基础用法：
• 进阶用法:
• 使用a 控制其他块的样式：
• 使用a控制a的兄弟元素 c(同级元素)：
• 使用a控制a的就近元素d：
• 总结一下：

鼠标悬浮覆盖元素后，以前使用js的mouseover和mouseout添加监听事件可以实现交互。现在可以使用CSS中的:hover选择器提高性能。:hover选择器可以针对不同的HTML元素，在鼠标悬停时改变元素（也可以是子元素、同级元素、就近元素）的样式，增强网页的互动性和用户体验。

定义：

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

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

基础用法：

这个表示的是：当鼠标悬浮在a这个样式上的时候，a的背景颜色设置为黄色

a:hover

{

background-color:yellow;

}

这个是最普通的用法了，只是通过a改变了style

进阶用法:

使用a 控制其他块的样式：

使用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. ‘～’ 控制就近元素；