关于CSS Tooltips(鼠标经过时显示)的效果
发布时间：2013-04-10 10:49:16 作者：佚名 
我要评论
我要评论本篇文章，小编为大家介绍关于CSS Tooltips(鼠标经过时显示)的效果，有需要的朋友可以参考一下
事实上各式Tooltips方法非常多，不过大部分都是用Javascript实现，但是使用CSS，可以更简单，更有效率。最重要的是符合标准。
我们对类加入position:relative属性，使得span标签的位置能够紧跟在链接后面。
复制代码
代码如下:<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>
相关文章
- 这篇文章主要介绍了 div+css样式自制带小三角的tooltips效果,需要的朋友可以参考下2017-10-11
CSS3 函数技巧 用css 实现js实现的事情(clac Counters Tooltip)
这篇文章主要介绍了如何使用CSS3代码更好实现js中效果，clac Counters Tooltip等功能使得代码更为简洁明了,需要的朋友可以参考下2017-08-15- 这篇文章主要为大家介绍了利用纯CSS3打造的自定义Tooltip边框的应用，今天的这款Tooltip却可以用CSS3来自定义边框，边框呈涂鸦风格。用CSS3实现自定义边框的好处是可以自适2014-11-05
用简单的jquery+CSS创建自定义的a标签title提示tooltip
这篇文章主要介绍了用简单的jquery+CSS创建自定义的a标签title提示tooltip，需要的朋友可以参考下2014-05-21- 有很多新手朋友不知道如何使用css制作带小三角的tooltip提示框，本人研究整理了一下，晒出来和大家分享，希望可以帮助你们2012-12-05
这篇文章主要介绍了纯css实现漂亮又健壮的tooltip的方法的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-04
最新评论