运用 CSS 的 absolute 与 relative 制作的提示

2016-02-19 19:40 8 1 收藏

想不想get新技能酷炫一下,今天图老师小编就跟大家分享个简单的运用 CSS 的 absolute 与 relative 制作的提示教程,一起来看看吧!超容易上手~

【 tulaoshi.com - Web开发 】

  实现 ToolTips 的方法有很多,大多数用 JS,下面是用纯 CSS 制作的,定位上运用了 absolute 与 relative。

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

  详细代码:

pText/p
pa class="tooltips" href="#" LinkspanToolTips/span/a/p
pText/p
style type="text/css"
.tooltips{
position:relative;
z-index:1;
text-decoration:none;
}
.tooltips:hover{
z-index:2;
background:none; /* 没有这个在 IE 中不可用 */
}
.tooltips span{
display:none; /* span 不可见 */
}
.tooltips:hover span{ /* span 标签仅在 :hover 状态时显示 */
display:block;
position:absolute;
top:20px;
left:20px;
width:100px; /* ToolTips 的宽度 */
/* 以下是样式 */
border:1px solid #D5C88B;
background:#FEFEE6;
padding:4px;
color:#A1870D;
}
body{
font-family:verdana;
font-size:12px;
}
/style

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

来源:http://www.tulaoshi.com/n/20160219/1621542.html

延伸阅读
天气与光线的运用技巧 画面成功源于灯光师、摄影师对光线的巧妙运用。而所有的照明光线都来自自然界。阳光和天光,摄影师偶尔介入环境反射光。纽约的阳光与中国的阳光并不存在照明差异(个别污染严重地域除外),摄影师的巧妙运用完全是对光线规律和造型的熟悉。这并不困难,特别是对于自然光光照明。 白昼时分的户外自然光,都是直接...
标签: Web开发
在做导航条或产品目录的样式都差不时习惯用到ul,在做圆角这样的图形我也喜欢,用到他们可以最小化减少DIV的套用。但有几个地方需要在CSS控制,不然会出现左边会出现很大的空边。 下面是登陆窗口的CSS代码,为了避免DIV的嵌套,所以运用了DIV.开始未对ul进行定义,只对ul li进行定义,结果左边空出很大的空隔,看来偷懒是不行的。 ...
标签: Web开发
      使用嵌套,可以让你的CSS代码读起来更清晰,能给你制定的元素定制CSS。       你不必重复有相同属性的多个选择符,你只要用英文逗号(,)隔开选择符就可以了。   比如,你有如下的代码: h2 { color: red; } .abc { color: red; } .abccom { color: red; } 则你可...
标签: Web开发
嗯,你可以说我很无聊。 最近疯狂加班,今天才得以有时间搞一个CSS的像素图来消遣休息下。 先看效果 : 运行代码框 !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"html xmlns="http://www.w3.org/1999/xhtml"headmeta http-...
标签: Web开发
有很多方法可以用来呈现数字, 我们最常用的就是制作一张静态图片. 但你也可以考虑CSS。使用CSS样式化元素来实现数据图表化. 可以使数据的控制更具灵活性。 下面. 你将看到8个CSS技巧. 教你如何使用CSS来制作漂亮、灵活的图表。 1. CSS线条图表数据 这个实例包含了三种图形数据的实现方法。上面的Basic Bar Graph实例中使用了一个div包含图...

经验教程

234

收藏

54
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部