您的位置：首页 > Web前端 > CSS

Html+Css 纯CSS实现的文字提示 （精通CSS高级WEB解决方案）读书笔记

2016-02-15 12:01 721 查看
今天看了纯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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航