| 网站首页 | 模板 | 资料 | 源码 | 工具 | 开发 | 设计 | 安全 | 项目 | 网络 | 图片 | 系统 | 数据库 | 博客 | 会员中心 | 小说 | 
MYFTP 精品资料下载
网络学院
学习资料
源码模版
您现在的位置: 精品下载 >> 开发 >> 网站开发 >> CSS技术 >> 文章正文 用户登录 新用户注册
纯CSS 实现Tooltips效果            【字体:
纯CSS 实现Tooltips效果
作者:佚名    文章来源:不详    点击数:    更新时间:2007-12-18

  事实上各式Tooltips方法非常多. 不过大部分都是用JavaScript实现.
  我们对类加入position:relative属性,使得span标签的位置能够紧跟在链接后面.

<br /><br /><br /><br /><br />
<a class="tooltips" href="#tooltips">这就是Tooltips<span>如你所见,这些附加的说明文字在鼠标经过的时候显示。</span></a>
<style type="text/<a href="http://www.blue1000.com/bkhtml/c23/" title="CSS教程">CSS</a>">
/*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层在最上面。

 

文章录入:chqnet    责任编辑:chqnet 
  • 上一篇文章:

  • 下一篇文章:
  • 最新热点 最新推荐 相关文章
    点击单选框就直接激活链接的
    CSS让网页中的内容自动换行的
    用css实现文字的自动隐藏
    在CSS样式表里使用JavaScrip
    CSS实现导航条图片的翻转菜单
    CSS样式表:链接好还是嵌入好
    CSS自动实现网页打印版本
    使用html表格和CSS进行混合网
    常用CSS缩写语法总结
    认清CSS的类class和标识id选
      网友评论:(只显示最新10条。评论内容只代表网友观点,与本站立场无关!)