今天看了纯CSS实现的文本段落导航，特此记录一下：
实现效果：
基本思路：
1.将要被提示的部分设置为position:relative; 相对于文档流进行偏离。 提示的内容设置为position:absolute; 脱离文档流进行定位（可以起到遮盖的效果）。
初始状态时，display:none; 将提示内容隐藏。
当鼠标悬浮的时候，利用伪类选择器， 将内容 显示出来 display:block;
实现代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
a.tooltip{
font-weight: bolder;
position:relative;
}
a.tooltip span{
display:none;
}
a.tooltip:hover span, a.tooltip:focus span{
display: block;
position: absolute;
top: 1em;
left: 2em;
padding: 0.2em 0.6em;
border: 1px solid #996633;
background-color:#FFFF66;
color: #000;
width:12em;
}
</style>
</head>
<body>
<p>
<a class="tooltip">Andy Budd<span>(This website rocks)</span></a> is a web developer based in Brighton England.
</p>
</body>
</html>
4804
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
