减小字体
增大字体- ·上一篇内容：Guns N' Roses的老歌《Don't Cry》的歌词
- ·下一篇内容：使用CSS实现改变鼠标的形状
纯CSS打造当鼠标经过链接时给出文字提示
我们在一些网站中经常看到一些链接，当鼠标经过时会给出很漂亮的文字提示，这些文字提示可以使用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.biye5u.com/">翔宇亭IT乐园欢迎您！<span>翔宇亭IT乐园向您提供最精彩的IT技术文章。</span></a>
<br /><br /><a class="tooltips" href="http://www.biye5u.com/article/">IT文章频道<span>提供编程技术、办公技术、电脑故障修理、网络技术、网页设计技术、数据库技术等方面的技术文章。</span></a>
<br /><br /><a class="tooltips" href="http://www.biye5u.com/entertain/">休闲娱乐频道<span>提供幽默笑话、爆笑文章、囧人囧事、社会事实、励志文章、经典语录、搞笑段子、趣闻轶事等文章。</span></a>
<br /><br /><a class="tooltips" href="http://www.biye5u.com/blog/">站长博客<span>站长的生活、评论与分享内容。</span></a>
转载请注明出处：翔宇亭IT乐园（http://www.biye5u.com/）
- 给好评 如果您觉得此知识好，就请您
100%(2) 
- 给差评 如果您觉得此知识差，就请您
0%(0) 
评论内容只代表网友观点，与本站立场无关！
评论摘要(共 0 条，得分 0 分，平均 0 分)
查看完整评论