css实现鼠标悬停时元素的显示与隐藏

css实现鼠标悬停时元素的显示与隐藏

跟着B站黑马学习小兔鲜项目，有个点记录一下

就是当鼠标悬浮在商品列表上时，列表中的商品会显示出来，离开时，商品隐藏，如下：

感觉这个功能经常会遇到，但一直没弄明白具体怎么实现的，现在仔细学习了一下，总算搞清楚了

先上代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154

上面是完整代码，关键在于layer的样式

首先看正常情况下，鼠标未悬浮时layer的样式

.layer {
 	width: 990px;
    height: 500px;
    background: rgba(255, 255, 255, 0.8);
    position: absolute;
    left: 250px;
    top: 0;
    display: none;
    padding: 0 15px;
}
1
2
3
4
5
6
7
8
9
10

display:none;实际上就是隐藏元素

再看看悬浮时layer的样式：

            // 关键样式  hover状态下的layer盒子变成block
            &:hover {
                .layer {
                    display: block;
                }
            }
1
2
3
4
5
6

注意，悬浮是悬浮在layer的父元素也就是menu上，悬浮时，设置display:block；即可展示layer

总结一下：

• display: none;隐藏元素
• display:block;显示元素，悬浮时设置