當前位置：首頁 >

动态显示选项框

發(fā)布時間：2025/5/22 39 豆豆

生活随笔收集整理的這篇文章主要介紹了动态显示选项框小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

效果（如上圖）：鼠標滑到“應(yīng)用”上時顯示下面幾個圖標，鼠標離開后隱藏圖標。

方法：寫一個<div>用來存放這些小圖標，然后再鼠標滑動的時候append到“應(yīng)用”所在的div里。(這里暫時先不要用下面的方法實現(xiàn)，用下面的方法實現(xiàn)，鼠標就不能移到各個圖標上，因為鼠標一離開“應(yīng)用”，圖標框就會自動隱藏)

效果（如上圖）：點擊笑臉圖標則彈出各種表情選項框，點擊選項框外任意地方可以隱藏選項框。

方法：可任意涌上一種方法實現(xiàn)，也可以寫一個div放置選項框，然后設(shè)置這個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>

</ul>
</div>
</body>

如果包含ul的div不占據(jù)空間，則可能是因為你給ul或其它的tags的position設(shè)置為了absolute

轉(zhuǎn)載于:https://www.cnblogs.com/liubingna/archive/2013/03/04/2942833.html

總結(jié)

以上是生活随笔為你收集整理的动态显示选项框的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。