减小字体
增大字体- ·上一篇文章：Dreamweaver 文件类型
- ·下一篇文章：图片特效：鼠标滑过，图片放大显示
纯CSS打造当鼠标经过链接时给出文字提示
：2011-10-23 17:43:11
我们在一些网站中经常看到一些链接，当鼠标经过时会给出很漂亮的文字提示，这些文字提示可以使用JS+CSS技术来实现，可是很复杂，本文介绍一种使用纯CSS实现文字提示的功能。
实现本技术需要两步：
第一步：将下面的CSS内容放到<head>与</head>标签之间，一般可放在<title>之前或</title>之后；
<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>
第二步：在<body>与</body>标签之间，在需要实现链接的<a>标签中使用class属性，其值为tooltips,在链接内容中使用<span>标签给出文字提示内容，具体如下：
<br />
<a class="tooltips" href="http://www.k88.net/">翔宇亭IT乐园欢迎您！<span>翔宇亭IT乐园向您提供最精彩的IT技术文章。</span></a>
<br /><br /><a class="tooltips" href="http://www.k88.net/article/">IT文章频道<span>提供编程技术、办公技术、电脑故障修理、网络技术、网页设计技术、数据库技术等方面的技术文章。</span></a>
<br /><br /><a class="tooltips" href="http://www.k88.net/entertain/">休闲娱乐频道<span>提供幽默笑话、爆笑文章、囧人囧事、社会事实、励志文章、经典语录、搞笑段子、趣闻轶事等文章。</span></a>
<br /><br /><a class="tooltips" href="http://www.k88.net/blog/">站长博客<span>站长的生活、评论与分享内容。</span></a>
转载请注明出处见来源（http://www.k88.net/）
纯CSS打造当鼠标经过链接时给出文字提示
