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

代码语言

代码分类

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

作者:Dezai.CN / 发布于2012/11/21/ 585

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

评论列表

本站所提供的代码，版权归原作者所有，若有侵犯作者版权，请与我们联系，我们将立即删除或修改。谢谢!
本站所有代码发布及提供者。

试试其它关键字

　工具提示效果　

同语言下

可能有用的

Dezai.CN贡献的其它代码(4037)