运用 CSS 的 absolute 与 relative 制作的提示
文章来自:互联网 | 发表时间:2007-9-24 20:47:22
实现 ToolTips 的方法有很多,大多数用 JS,下面是用纯 CSS 制作的,定位上运用了 absolute 与 relative。
详细代码:
<p>Text</p>
<p><a class="tooltips" href="#" >Link<span>ToolTips</span></a></p>
<p>Text</p>
<style type="text/css">
.tooltips{#FF0000;">
position:relative;#FF0000;">
z-index:1;#FF0000;">
text-decoration:none;
}
.tooltips:hover{#FF0000;">
z-index:2;#FF0000;">
background:none; /* 没有这个在 IE 中不可用 */
}
.tooltips span{#FF0000;">
display:none; /* span 不可见 */
}
.tooltips:hover span{#FF0000;"> /* span 标签仅在 :hover 状态时显示 */
display:block;#FF0000;">
position:absolute;#FF0000;">
top:20px;#FF0000;">
left:20px;#FF0000;">
width:100px;#FF0000;"> /* ToolTips 的宽度 */
/* 以下是样式 */
border:1px solid #D5C88B;#FF0000;">
background:#FEFEE6;#FF0000;">
padding:4px;#FF0000;">
color:#A1870D;
}
body{#FF0000;">
font-family:verdana;#FF0000;">
font-size:12px;
}
</style>