您现在的位置： 潮州吧 >> 教程 >> CSS >> 正文

纯CSSTooltips

[ 来源：网站标准化 | 作者：网络收集 | 时间：2007-12-14 23:18:52| 收藏本文 | 点击：载入次数... ]

事实上各式Tooltips方法非常多.不过大部分都是用javascript实现.例如ikshow.cn,使用的javascript,DHTMLTooltips。

我承认我的javascript很水皮……但是使用CSS，可以更简单，更有效率。最重要的是符合标准。我们对类加入position:relative属性，使得span标签的位置能够紧跟在链接后面.

来看看具体的代码:

＜br/＞＜br/＞＜br/＞＜br/＞＜br/＞
＜aclass="tooltips"href="#tooltips"＞这就是Tooltips＜span＞如你所见，这些附加的说明文字在鼠标经过的时候显示。＜/span＞＜/a＞
＜styletype="text/css"＞
/*Tooltips*/
.tooltips{
position:relative;/*这个是要害*/
z-index:2;
}
.tooltips:hover{
z-index:3;
background:none;/*没有这个在IE中不可用*/
}
.tooltipsspan{
display:none;
}
.tooltips:hoverspan{/*span标签仅在:hover状态时显示*/
display:block;
position:absolute;
top:21px;
left:9px;
width:15em;
border:1pxsolidblack;
background-color:#ccFFFF;
padding:3px;
color:black;
}
＜/style＞

其中定义z-index以确保弹出的Tooltips层在最上面。使用:定义以上类之后,将类应用到具体标签上,该标签中的span标签将作为Tooltips.如:

＜aclass="tooltip

[1] [2] 下一页


>>  相关教程：

    没有相关教程
网友评论：
发表您对纯CSSTooltips的评论
姓 名： *
性 别： 男 女
E-mail：
评 分： 1分 2分 3分 4分 5分
评论内容：
·用户发表意见仅代表其个人意见，并且承担一切因发表内容引起的纠纷和责任
·本站管理人员有权在不通知用户的情况下删除不符合规定的评论信息或留做证据
·请客观的评价您所看到的教程，提倡就事论事，杜绝漫骂和人身攻击等不文明行为