hover 选择器

1.定义：选择鼠标指针浮动在其上的元素，并设置其样式；

注意：父级控制子元素时刻用“>”表明等级，但“>”不能通过父级直接控制后代，父级控制子代用“”（空格），“+”用于控制兄弟元素，

2.用法：

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div1{width:500px;height:500px;background:red}
        #div1:hover{background:black}
        #div2{width:300px;height:300px;background:pink}
        #div1:hover>#div2{background:yellow}
        #div3{width:100px;height:100px;background:blue}
        #div1:hover>#div3{background:green}
        #div4{width:200px;height:200px;background:orange}
        #div:hover+#div4{background:purple}
        #div:hover~#div4{background:lightblue}
    </style>
</head>
<body>
<div id="div1">
    <div id="div2">
        <div id="div3"></div>
        <div id="div4"></div>
    </div>
</div>
</body>
</html>
网页效果：

 

鼠标指针浮动在其上

 

 

 
posted @ 2021-11-14 23:58  三镹  阅读(95)  评论(0)    收藏  举报