关注前端开发
HTML5、CSS3、Javascript

完全CSS实现鼠标移上出现层的效果(超简单)

看过许多鼠标事件,都很复杂,太多的文件和繁杂的代码,而且好多都是用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实现鼠标移上出现层的效果(超简单)

分享: