實現(xiàn) ToolTips 的方法有很多,大多數(shù)用 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{
position:relative;
z-index:1;
text-decoration:none;
}
.tooltips:hover{
z-index:2;
background:none; /* 沒有這個在 IE 中不可用 */
}
.tooltips span{
display:none; /* span 不可見 */
}
.tooltips:hover span{ /* span 標(biāo)簽僅在 :hover 狀態(tài)時顯示 */
display:block;
position:absolute;
top:20px;
left:20px;
width:100px; /* ToolTips 的寬度 */
/* 以下是樣式 */
border:1px solid #D5C88B;
background:#FEFEE6;
padding:4px;
color:#A1870D;
}
body{
font-family:verdana;
font-size:12px;
}
</style>