2016-10-13 00:16:48 点击量:10 标签: 收藏本文
[html5]纯CSS实现的鼠标经过文本时提示的信息
- <a class="tooltips" href="#tooltips">这就是Tooltips<span>正是你见到的,这些附加的说明文字是在鼠标经过的时候显示。</span></a>
- <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>