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

sunny阿遒

sunny阿遒

2016-02-19 19:40

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

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

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

  详细代码:

(本文来源于图老师网站,更多请访问http://m.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

展开更多 50%)
分享

猜你喜欢

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

Web开发
运用 CSS 的 absolute 与 relative 制作的提示

Absolute与Relative的运用

Web开发
Absolute与Relative的运用

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

认识CSS中absolute与relative

Web开发
认识CSS中absolute与relative

解读Absolute与Relative

Web开发
解读Absolute与Relative

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

Position:Relative/Absolute无法冲破的等级

Web开发
Position:Relative/Absolute无法冲破的等级

HTML相对路径(Relative Path)和绝对路径(Absolute Path)

Web开发
HTML相对路径(Relative Path)和绝对路径(Absolute Path)

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

MAC如何找回不见的以太网

MAC如何找回不见的以太网

Web标准学习:CSS样式书写风格

Web标准学习:CSS样式书写风格
下拉加载更多内容 ↓