css做出丰富的Tooltips
css做出丰富的Tooltips
插入代码：
ihandudUcky的私生活
a:link,a:visited{text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #453739;
}
a:hover{color: #C86F70;
text-decoration: none;
}
/*Tooltips*/
.tooltips{
position:relative;
/*这个是把框定位在文字旁边*/
z-index:2;
}
.tooltips:hover{
z-index:3;
background:none;
/*没有这个在IE中不可用*/
}
.tooltips span{
display: none;
/*一般状态不显示span里的字符*/
}
.tooltips:hover span{ /*span 标签仅在 :hover 状态时显示*/
display:block;
position:absolute;
top:21px;
left:9px;
width:15em;
border:1px solid #C7BC98;
background-color:#EBE2C8;
padding: 3px;
color:black;
}
用这个方法可以作出很多样式的Tooltips,这个方法在ie以及firefox下都可以使用.
posted on
2008-02-22 16:59 lovablebox 阅读(
...) 评论(
...) 编辑 收藏 【css做出丰富的Tooltips】转载于:https://www.cnblogs.com/lovablebox/archive/2008/02/22/1077911.html
推荐阅读
- 标签、语法规范、内联框架、超链接、CSS的编写位置、CSS语法、开发工具、块和内联、常用选择器、后代元素选择器、伪类、伪元素。
- 幸福是个比较级
- 3.css浮动
- 如何做出理性决策
- 产品设计的简化
- 为自己的人生做出正确的选择|为自己的人生做出正确的选择 | 《精进》
- 怯弱、徘徊
- 亲子跳绳比赛
- 丰富多彩的三月份――打造六人班级日常精彩生活三月份活动汇总
- css|我用css精灵图拼接了自己的英文名字，不会还有人不知道精灵图技术吧（）