看過許多鼠標事件，都很復雜，太多的文件和繁雜的代碼,而且好多都是用js實現，加載速度很慢。

這幾天一直在找一種簡單的實現效果，完全 CSS編寫的效果，現在找到了，非常的少。

這就是完全 CSS實現的層效果，真的很不錯的，稍微美化一下就非常好了。

希望大家多提意見……

CSS

.demo ul{position:relative;padding:0;margin:0;font-size:12px;}

.demo ul li{visibility:hidden;position:absolute;top:5px;left:180px;width:300px;padding:6px;border:#dfdfdf 1px solid;}/*顯示li的內容的定位*/

.demo ul:hover li,.demo ul a:hover li{visibility:visible;}/*鼠標經過ul時，顯示li的內容*/

.demo ul li a{margin-right:10px;color:#333;}

.demo ul b a{color:#333;width:200px;display:block;height:25px;line-height:25px;background:#fefefe;border:#dfdfdf 1px solid;text-decoration:none;text-indent:10px;}

HTML

<div <ul><b><a href=”#”>網頁夢想吧</a></b>

<li><a href=”#”>網頁設計</a><a href=”#”>網站開發</a><a href=”#”>網頁筆記</a></li>

</ul>

</div>

總結

以上是生活随笔為你收集整理的完全CSS实现鼠标移上出现层的效果（超简单）的全部內容，希望文章能夠幫你解決所遇到的問題。

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