hover用法

:hover 选择器用于选择鼠标指针浮动在上面的元素，它适用于所有元素

语法: 标签选择器:hover{样式代码;}

用法：1、直接在悬浮元素上改变当前元素本身的样式；

2、改变当前元素子级元素的样式；

3、改变与当前元素同级元素的样式；

4、改变就近元素的样式等

(1)鼠标悬停当前元素上改变当前元素本身的样式:

语法: 要悬停的标签选择器:hover{悬停后所需的样式代码;}

例：当鼠标悬浮在盒子div1上，div1颜色由绿变红

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div1 {
            height: 300px;
            width: 300px;
            background: red;
        }
        #div1:hover{background: pink;}
    </style>
</head>
<body>

<div id="div1">1</div>
</body>
</html>



（2）控制当前元素子元素的样式

语法: 要悬停的标签选择器:hover>需变化的标签选择器{悬停后所需的样式代码;}

例：当鼠标悬浮在盒子div1上，div1子级div2颜色由绿变黄

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         #div1 {
 8             height: 300px;
 9             width: 300px;
10             background: red;
11         }
12         #div2 {
13             height: 100px;
14             width: 100px;
15             background: green;
16         }
17         #div1:hover>#div2{background: yellow;}
18     </style>
19 </head>
20 <body>
21 
22 <div id="div1">
23     <div id="div2"></div>
24 </div>
25 
26 
27 </body>
28 </html>

（3）控制当前元素孙级元素的样式

语法: 要悬停的标签选择器:hover  (此前是空格)需变化的标签选择器{悬停后所需的样式代码;}

例：当鼠标悬浮在盒子div1上，div1孙级div3颜色由绿变黄

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         #div1 {
 8             height: 300px;
 9             width: 300px;
10             background: red;
11         }
12         #div1:hover{background: #00b38a}
13         #div2 {
14             height: 100px;
15             width: 100px;
16             background: green;
17         }
18         #div3{
19             height: 50px;
20             width: 50px;
21             background:blue;
22         }
23         #div1:hover #div3{background: black}
24     </style>
25 </head>
26 <body>
27 
28 <div id="div1">1
29     <div id="div2">2
30         <div id="div3">3</div>
31     </div>
32 </div>
33 
34 
35 </body>
36 </html>

（4）控制与当前元素同级元素的样式

语法: 要悬停的标签选择器:hover+需变化的标签选择器{悬停后所需的样式代码;}

注意:这里的同级div2必须是div1紧邻着的下一个弟弟,否则hover不起效用

例：当鼠标悬浮在盒子div1上，div1同级div2颜色由绿变黄

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         #div1 {
 8             height: 300px;
 9             width: 300px;
10             background: red;
11         }
22         #div2 {
23             height: 200px;
24             width: 200px;
25             background:blue;
26         }
27         #div1:hover+#div2{background: pink}
28     </style>
29 </head>
30 <body>
31 
32 <div id="div1">1 </div>
37 <div id="div2">2</div>
39 
40 </body>
41 </html>

 

posted @ 2021-11-13 14:02  絮行  阅读(1773)  评论(0)  编辑  收藏  举报