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

完全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>

赞(10)
未经允许不得转载:大前端 » 完全CSS实现鼠标移上出现层的效果(超简单)
分享到: 更多 (0)

评论 19

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

    I was suggested this web site by my cousin.
    I’m not sure whether this post is written by him as nobody
    else know such detailed about my trouble. You’re incredible!
    Thanks!

  2. #16

    Aw, i thought this was a really nice post. In thought I have to put in writing this way additionally – taking time and actual effort to create a top notch article… but what / things I say… I procrastinate alot by no indicates seem to get something accomplished.

    Vito Barclift1周前 (05-17)回复
  3. #15

    I’m amazed, I must say. Seldom do I come across a blog that’s both equally educative and entertaining, and let me tell you, you’ve hit the nail on the head. The issue is something not enough men and women are speaking intelligently about. I’m very happy I came across this during my search for something concerning this.

  4. #14

    Thanks for another informative website. Where else could I get that kind of info written in such an ideal way? I have a project that I’m just now working on, and I have been on the look out for such info.

    Nonton Anime2周前 (05-11)回复
  5. #13

    Umm,OK. But my point is that I don’t understand what it is about the last sentence you don’t understand? Please explain. What do you mean by “average”?

    cat care3周前 (05-09)回复
  6. #12

    I simply had to say thanks yet again. I do not know the things I would have made to happen in the absence of those ways contributed by you relating to such a theme. It previously was a real terrifying circumstance in my circumstances, but noticing your specialized fashion you processed the issue forced me to jump with gladness. I’m happy for your information and then believe you comprehend what a powerful job that you’re getting into educating some other people through the use of a web site. I know that you have never come across any of us.

    Huidverbetering1个月前 (04-19)回复
  7. #11

    I truly wanted to write a brief note so as to say thanks to you for the stunning secrets you are sharing here. My extensive internet investigation has at the end of the day been paid with pleasant suggestions to share with my friends and family. I would repeat that we readers actually are unequivocally blessed to live in a very good network with many brilliant individuals with very helpful techniques. I feel somewhat grateful to have encountered your entire webpages and look forward to some more pleasurable minutes reading here. Thank you once more for everything.

    Huidinstituut1个月前 (04-19)回复
  8. #10

    Enjoyed the post.

    Ontstekingen1个月前 (04-18)回复
  9. #9

    Nice post! Thank you.

    Huidspecialisaties1个月前 (04-17)回复
  10. #8

    wonderful issues altogether, you simply received a logo reader. What could you suggest in regards to your post that you made some days ago? Any certain?

    my singing monsters2个月前 (03-28)回复
  11. #7

    Howdy! I just wish to give a huge thumbs up for the nice data you may have right here on this post. I can be coming again to your blog for more soon.

    Lang Loffler3个月前 (03-11)回复
  12. #6

    没小姑

    8年前 (2011-08-04)回复
  13. #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>

    enuobear9年前 (2010-08-27)回复
  14. #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;}

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

    enuobear9年前 (2010-08-27)回复
  15. #3

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

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

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

    晨洋9年前 (2010-05-29)回复
  17. #1

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

    看不到效果

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

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

立即前往