效果(如上图): 鼠标滑到“应用”上时显示下面几个图标,鼠标离开后隐藏图标。
方法:写一个<div>用来存放这些小图标,然后再鼠标滑动的时候append到“应用”所在的div里。(这里暂时先不要用下面的方法实现,用下面的方法实现,鼠标就不能移到各个图标上,因为鼠标一离开“应用”,图标框就会自动隐藏)
效果(如上图):点击笑脸图标则弹出各种表情选项框,点击选项框外任意地方可以隐藏选项框。
方法: 可任意涌上一种方法实现,也可以写一个div放置选项框,然后设置这个div的position为absolute;
Tips:
<title>Untitled Document</title>
<style type="text/css">
li {
float: left;
}
.clear:after {
content: ".";
height: 0;
visibility: hidden;
display: block;
clear: both;
}
ul {
position: absolute;
}
</style>
</head>
<body>
<div>
<ul class="clear">
<li><a class="clear" href="#"><img src="1.jpg"></a></li>
<li><a href="#"><img src="2.jpg"></a></li>
<li><a href="#"><img src="3.jpg"></a></li>
</ul>
</div>
</body>
如果包含ul的div不占据空间,则可能是因为你给ul或其它的tags的position设置为了absolute