CSS 教程（4）-实例--提示框

1.最基础的提示框

鼠标移动到这
  提示文本

这个是最基本的提示框，设置外层的定位为相对定位，里层的提示框定位为绝对定位，就是相对于父容器来说的。

如果要让提示框右边显示，那么可以将定位那段代码换成如下：

 /* 定位 */ 
position: absolute;
    top: -5px;
    left: 105%;//注意是105%就是本元素长度的有点空就行。

显示在左侧

position: absolute;
    z-index: 1;
    top: -5px;
    right: 105%;

显示在顶部

 position: absolute;
    z-index: 1;
    bottom: 100%;
    left: 50%;
    margin-left: -60px;

显示在底部

 position: absolute;
    z-index: 1;
    top: 100%;
    left: 50%;
    margin-left: -60px;

2.提示框显示箭头

鼠标移动到我这
  提示文本

上面的例子是在顶部显示一个带箭头的提示框，箭头向下指。
注意after，其实就是在被提示框后面加了一个空元素，然后利用此元素的边框等搞出来一个箭头而已。
注意：例子的颜色，故意使用红色，便于观察。

如果提示框在下边，那么需要改：
1.提示框位置需要修改为
bottom: 150%;--->top: 150%;
2.箭头需要修改：
top: 100%;---->bottom: 100%;
border-color: black transparent transparent transparent;---> border-color: transparent transparent red transparent;

这样修改后，箭头和提示框才对。

3.提示框淡入淡出

鼠标移动到我这
  提示文本

隐藏的时候设置：
/* 淡入 - 1秒内从 0% 到 100% 显示: */
opacity: 0;
transition: opacity 10s;//时间是10s

完成显示：
visibility: visible;
opacity: 1;

这样就能实现淡入淡出了。