當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

动态显示选项框

發布時間：2025/5/22 编程问答 27 豆豆

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

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

方法：寫一個<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>

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

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

轉載于:https://www.cnblogs.com/liubingna/archive/2013/03/04/2942833.html

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。