关注前端开发
关注用户体验

完全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实现鼠标移上出现层的效果(超简单)
分享到:更多 ()

评论 8

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #6

    没小姑

    6年前 (2011-08-04)回复
  2. #5

    代码被解析了 [:01]
    重来一个
    .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;}

    <div class=”demo”>
    <ul>
    <b><a href=”#”>网页梦想吧</a></b>
    <li><a href=”#”>网页设计</a><a href=”#”>网站开发</a><a href=”#”>网页笔记</a></li>
    </ul>
    </div>

    enuobear7年前 (2010-08-27)回复
  3. #4

    用CSS写的是否兼容IE6.0?我们测试过?有朋友是IE6.0吗?
    其实这里正确的是

    .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;}

    网页梦想吧
    网页设计网站开发网页笔记

    enuobear7年前 (2010-08-27)回复
  4. #3

    这写的什么破玩意啊,这样能有效果??

    失意的木偶7年前 (2010-06-02)回复
  5. #2

    <div 网页梦想吧代码都少个”>”能有效果?

    晨洋7年前 (2010-05-29)回复
  6. #1

    <div 网页梦想吧
    是不是有误。
    也没有效果

    看不到效果

    nick chan7年前 (2010-05-04)回复

themebetter 国内更好的WordPress主题服务商

立即前往