PHP程序员小白到大牛集训(12期免息)
首页 > 社区问答列表 >当鼠标悬浮在a这个样式上的时候,a的背景颜色设置为黄色

  当鼠标悬浮在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. ‘~’ 控制就近元素;

实例

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

  • WBOY
  • WBOY    2022-09-23 09:57:421楼

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

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

    +0添加回复

  • 回复