当鼠标悬浮在a这个样式上的时候,a的背景颜色设置为黄色

浏览:30日期:2024-01-10

问题描述

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

1

2

3

4

a:hover

{

background-color:yellow;

}

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

用法2:

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

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

1

2

3

.a:hover .b {

background-color:blue;

}

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

1

2

3

.a:hover + .c {

color:red;

}

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

1

2

3

.a:hover ~ .d {

color:pink;

}

总结一下:

1. 中间什么都不加 控制子元素;

2. ‘+’ 控制同级元素(兄弟元素);

3. ‘~’ 控制就近元素;

实例

用一个按钮控制一个盒子的运动状态,当鼠标移到按钮上方时,盒子停止运动,鼠标移开时,盒子继续运

问题解答

回答1:

相邻兄弟选择器(+)可选择紧接在另一个元素后的元素,且二者具有相同的父亲元素

兄弟选择器(~)可查找某一个指定元素的后面的所有兄弟结点

相关文章: