<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.ap{
width: 75px;
height: 35px;
border: 1px solid #000000;
text-align: center;
line-height: 35px;
}
.bp{
display: none;
background-color: #f9f9f9;
min-width: 70px;/*最小宽度*/
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);/*向div添加阴影*/
padding: 12px 16px;
color: #000000;
}
.ap:hover{
background-color: #EEEEEE;
}
.ap:hover .bp{
display: block;
}
.pick{
width: auto;
height: 35px;
}
</style>
</head>
<body>
<div class="ap">
来这里
<div class="bp">
<div class="pick" >惊喜1</div>
<div class="pick" >惊喜2</div>
<div class="pick" >惊喜3</div>
</div>
</div>
</body>
</html>
上面是实现代码，可以直接运行。
实现过程：
1、先定义两个div，将其中一个用"display：none"设为默认隐藏。
注意：隐藏的div要定义在不隐藏的div里面！
2、在CSS中用“hover”实现鼠标悬浮后显示隐藏的div.
.ap:hover .bp{
display: block;
}
扫一扫
5896
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
