CSS实例：非常不错的鼠标悬停TIP效果

时间：2008-05-15 来源：qbq

在实际开发中，我们会给图片加上alt、给链接加上title，为了出故障预备，也可以提醒用户的内容是什么，或仅仅是tip提示。今天我们介绍一款不错的鼠标悬停TIP效果，图片如下： 500)this.width=500;" border=0>
　　这样的效果在实际开发中是非常有用的。我们可以为我们的链接加上这样的效果，以更加体现网页的亲和力与易用性。我们也可以在提供下载的链接下提供这样的tip提示。我们看这样的鼠标悬停TIP效果是如何实现的。看下面的XHTML代码：

<a class="tip" href="#">Div+CSS教程52CSS.com Div+CSS教程</a> 　　在链接A标签中，嵌套了span与p标签，这就是我们的tip的基本元素了，我们看CSS如何控制显示它。CSS代码如下： .52css.com]
* {
 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提示的容器效果。　　我们看最终的运行效果：
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>www.52css.com</title>
<style type="text/css">
* {
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;
}
</style>
</head>
<body>
<a class="tip" href="#">Div+CSS教程shejijh.comDiv+CSS教程</a>
<a class="tip" href="#">CSS布局实例shejijh.comCSS布局实例</a>
<a class="tip" href="#">CSS2.0教程shejijh.comCSS2.0教程</a>
<a class="tip" href="#">CSS酷站欣赏shejijh.comCSS酷站欣赏</a>
<a class="tip" href="#">CSS模板下载shejijh.comCSS模板下载</a>
</body>
</html>
本文转自于设计江湖论坛 http://bbs.shejijh.com/viewthread.php?tid=19796&fromuid=0