一、仿照小米横向特效
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>二维码弹出</title>
<style>
.box{
width:200px;
margin:220px;
position:relative;
text-align:center;
background:#eea;
}
.hidden{
width:200px;
height:200px;
display:none;
position:absolute;
bottom:100%;
left:0px;
}
.box:hover .hidden{
display:inline-block;
}
</style>
</head>
<body>
<div class="box">百度二维码
<div class="hidden"><img src="baidu.jpg"></div>
</div>
</body>
</html>
实现效果：（鼠标移动到上面之后弹出橙色区域部分）
二、弹出二维码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>二维码弹出</title> <style> .box{ width:200px; margin:220px; position:relative; text-align:center; background:#eea; } .hidden{ width:200px; height:200px; display:none; position:absolute; bottom:100%; left:0px; } .box:hover .hidden{ display:inline-block; } </style> </head> <body> <div class="box">百度二维码 <div class="hidden"><img src="baidu.jpg"></div> </div> </body>
</html>
实现效果：（鼠标移动到上面之后弹出百度的二维码）
之所以能实现弹出效果，是因为为子元素设置 display:none 属性
display:none —— 不为隐藏的对象保留其原来的位置，使其在页面上消失；
然后使用：hover属性当鼠标悬停在父元素 .box 上时设置子元素.hidden的样式为display:block 使子元素出现在页面。