当鼠标悬浮在a这个样式上的时候,a的背景颜色设置为黄色
PHP中文网用户-9291898
PHP中文网用户-9291898 2022-09-22 19:25:53
0
1
879

这个表示的是:当鼠标悬浮在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. ‘~’ 控制就近元素;

实例

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

PHP中文网用户-9291898
PHP中文网用户-9291898

全部回复(1)
WBOY

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

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

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板