hover的使用

2023/11/21 技术

A元素:hover 鼠标悬停在A元素时,改变A元素样式

A元素:hover B元素 鼠标悬停在A元素时,改变A元素的子元素B的样式

A元素:hover + B元素 鼠标悬停在A元素时,改变与A相邻的兄弟元素B的样式(A必须与B 相邻)

A元素:hover ~ B元素 鼠标悬停在A元素时,改变A的指定兄弟元素B的样式表示(A B可以不相邻,但B必须在A元素之后。)

.right:hover{    /*本身*/
    transform: scale(1.05);   
    z-index: 22;
}

.right:hover .right-1{    /*子元素*/
    transform: translate(200px);
} 


.right-1:hover+.right-2{   /*相邻兄弟元素*/
    transform: translate(200px);
} 

.right-1:hover~.right-3{    /*身后的不相邻兄弟元素*/
    transform: translate(200px);
} 
.right-1:hover~.right-4{
    transform: translate(200px);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
    LOSER
    米津玄師