在实际开发中，我们会给图片加上alt、给链接加上title，为了出故障预备，也可以提醒用户的内容是什么，或仅仅是tip提示。今天我们介绍一款不错的鼠标悬停TIP效果，图片如下：

 

　　这样的效果在实际开发中是非常有用的。我们可以为我们的链接加上这样的效果，以更加体现网页的亲和力与易用性。我们也可以在提供下载的链接下提供这样的tip提示。我们看这样的鼠标悬停TIP效果是如何实现的。看下面的XHTML代码：

 

　　Example Source Code []

 

　　Div CSS教程

 

　　Div CSS教程

 

　　在链接A标签中，嵌套了span与p标签，这就是我们的tip的基本元素了，我们看CSS如何控制显示它。CSS代码如下：

 

　　Example Source Code []

 

　　* {

 

　　font-size:12px;

 

　　}

 

　　。tip{

 

　　position:relative;

 

　　color:#00c;

 

　　text-decoration:none;

 

　　}

 

　　。tip:hover{

 

　　background:none;

 

　　color:#000;

 

　　}

 

　　。tip span {

 

　　display:none;

 

　　}

 

　　。tip:hover span{

 

　　display:block;

 

　　position:absolute;top:26px;left:10px;

 

　　border-bottom:2px solid #eee;

 

　　border-right:2px solid #eee;

 

　　}

 

　　。tip:hover span p {

 

　　color:#f60;

 

　　text-align:left;

 

　　padding:5px;

 

　　border:1px solid #ccc;

 

　　background:#fff;

 

　　}

 

　　整体布局声明，文字大小为12px。链接的文字及提示tip的文字均为12px。

 

　　定义类tip为相对定位，文字颜色为#00c。链接的提示下划线为无。

 

　　类tip:hover效果，无背景色，文字颜色为#000。

 

　　在默认情况下，类tip下的span是不显示的，即：display:none。

 

　　类tip:hover状态下的span设置：

 

　　定义为块元素，绝对定位于距上26px距左为10px。

 

　　下边框与右边框均为2px的实线，颜色为#eee。

 

　　这里是tip提示的最外边框，此设置定位它的位置并形成了简单的阴影效果。

 

　　类tip:hover状态下的span里面的p的设置：

 

　　定义文字颜色为#f60，居左对齐。

 

　　填充为5px，使文字与边框有一定的距离。

 

　　边框为1px的实线，颜色为#ccc。背景色为白色#fff。

 

　　这里定义了tip文字的显示，将tip四面形成实绩边框。

 

　　再加上前面span中定义了下边框及右边框，就勾勒出了tip提示的容器效果。

 

　　我们看最终的运行效果：

 

　　Source Code to Run []

 

　　[ 可先修改部分代码 再运行查看效果 ]