登录

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

这个表示的是:当鼠标悬浮在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
PHP中文网用户-9291898PHP中文网用户-929189812 天前155 次浏览

全部回复(1) 我要回复

  • WBOY

    WBOY2022-09-23 09:57:42

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

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

    回复
    0
  • 取消回复发送