论坛交流
首页办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: Windows | Word2007 | Excel2007 | PowerPoint2007 | Dreamweaver 8 | Fireworks 8 | Flash 8 | Photoshop cs | CorelDraw 12
编程视频: C语言视频教程 | HTML | Div+Css布局 | Javascript | Access数据库 | Asp | Sql Server数据库Asp.net  | Flash AS
当前位置 > 文字教程 > div+css布局教程
Tag:css,入门,技巧,div,实例,示例,菜单,布局,web2.0,ul,li,经验,列表,web标准,xhtml,web标准,浏览器,兼容,css hack,表格,视频教程

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

文章类别:div+css布局 | 发表日期:2008-9-26 11:27:50

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


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

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
<a class="tip" href="#">Div CSS教程<span><p>21shipin.com Div CSS教程</p></span></a>

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

div css xhtml xml Example Source Code Example Source Code [www.21shipin.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提示的容器效果。

  我们看最终的运行效果:
div css xhtml xml Source Code to Run Source Code to Run [www.21shipin.com]

[ 可先修改部分代码 再运行查看效果 ]
视频教程列表
文章教程搜索
 
div+css推荐教程
div+css热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058