纯CSS的工具提示效果代码,Css代码库,德仔网

代码语言

代码分类

【Css】纯CSS的工具提示效果

作者: / 发布于2018/4/25/ 967

<head>
	<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;
        width:300px;
        height:400px;
    }
</style>
</head>

<body>
	<a href="#">Roll over here <span>Pure Css Tooltip</span></a>
	</body>

试试其它关键字

同语言下

可能有用的

贡献的其它代码Label