当前位置:首页>> 网站建设知识>> 网站建设知识

全文搜索

精华导读

·网站知识:虚拟中的真实:虚拟主机应用初探
·如何做好互联网的策划
·自动分词与中文搜索引擎
·网页文章的优化
·网站的一些基础小知识
·把网站变成卖场
·细说选择.cn域名的七大理由
·网站性感域名十大原则
·大型商务网站的SEO优化误区
·导致搜索引擎收录困难的5种原因
·网站建设中meta标签之详解
·网页制作中Web网页安全色谱
·网页设计中HTML常范的五个错误
·如何建立网站地图(site map)
·网站建设时如何选购虚拟主机?
·中国国家顶级域名和国际域名有什么区别?
·企业建设网站域名可以使用哪些字?
·建设网站时企业如何准备建网站资料?
·DIV+CSS建立标准WEB网页的好处

最新发表

·CSS中float引起层飘出上级层的解决方案,清除浮动的好方法
·用CSS样式实现显示隐藏层方案
·用CSS按比例缩放图片
·绝对路径与相对路径祥解
·让文本框textarea自动适应内容的高度
·纯CSS Tooltips
·网页制作学习:虚线表格的制作方法
·超强超靓网页日历代码,网页特效
·极品万年历网页特效
·影响SEO的页面制作细节
·SEO实战:逃离Google补充材料的五个技巧
·如何提高网站的Google页面等级(PR值)
·论坛宣传网站的十二大绝招
·搜索引擎注册九大秘法
·10种在SEO之外获得网站流量的方式
·巧妙应对内容复制---Google官方博文
·新网站排名不稳定的google幽灵现象
·网站优化技术:网站推广完全手册
·网站优化技术:新手一个月轻松打造3000IP的小站

纯CSS Tooltips

文章来源:网站制作知识 文章编辑:admin 添加时间:2009-2-22 12:13:16

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

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

来看看具体的代码:

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

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

<a class="tooltips" href="#tooltips">这就是Tooltips<span>如你所见,这些附加的说明文字在鼠标经过的时候显示。</span></a>

以上方法适合大部分现行的浏览器,例如Firefox,IE.因为大多数现行的浏览器都支持将:hover选择器用到任何标签(参考whatever:hover). 对于只能用到a标签的浏览器,我们所需要做的仅仅是: 在类的前面加上"a"。具体如下:

/*Tooltips*/
a.tooltips{
    position:relative; /*这个是关键*/
 z-index:2;
}
a.tooltips:hover{
 z-index:3;
 background:none; /*没有这个在IE中不可用*/
}
a.tooltips span{
 display: none;
}
a.tooltips:hover span{ /*span 标签仅在 :hover 状态时显示*/
 display:block;
 position:absolute;
 top:9px;
 left:9px;
 width:15em;
 border:1px solid black;
 background-color:#ccFFFF;
 padding: 3px;
 color:black;
}

[ ]

首页 评论 打印 刷新 返回顶部 关闭
【相关文章】  【相关评论】
CSS中float引起层飘出上级层的解决方案,清除浮动的好方法
用CSS样式实现显示隐藏层方案
用CSS按比例缩放图片
纯CSS Tooltips
CSS兼容IE6 IE7 和FF的总结