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);
}