添加代码
首页 > HTML > 片段代码

发布者

啊呜喵 发于2010/10/20 12h

查看次数:65170

标签 Tags

谁收藏了?

9人已收藏

纯CSS的工具提示效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<a href="#">Roll over here <span>Pure Css Tooltip</span></a>
 
<style type="text/css">
    body {
        margin:0;
        padding:40px 80px;
        background:#fff;
        font:70% Arial, Helvetica, sans-serif;
        color:#555;
        line-height:180%;
    }
    h1, h2{ font-size:180%; font-weight:normal; color:#555; }
    h2{ font-size:140%; }    
    p{ margin:1em 0; width:500px; }
    a{ color:#f20; text-decoration:none; z-index:10;}
    a:hover{ color:#999; position:relative; z-index:100; }       
    
    a span{ display:none; }
    a:hover span{
        display:block;
        position:absolute;
        float:left;
        white-space:nowrap;
        top:-2.2em;
        left:.5em;
        background:#fffcd1;
        border:1px solid #444;
        color:#444;
        padding:1px 5px;
        z-index:10;
    }
</style>

评论

提交成功!

您现面为匿名用户,暂不能发表评论。如想评论则请登录注册