Chinaunix首页 | 论坛 | 博客
  • 博客访问: 29951236
  • 博文数量: 708
  • 博客积分: 12163
  • 博客等级: 上将
  • 技术积分: 8240
  • 用 户 组: 普通用户
  • 注册时间: 2007-12-04 20:59
文章分类

全部博文(708)

分类: Java

2009-11-04 16:57:55

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


<a class="tip" href="#">Div+CSS教程<span><p>52CSS.com Div+CSS教程</p></span></a>
  在链接A标签中,嵌套了span与p标签,这就是我们的tip的基本元素了,我们看CSS如何控制显示它。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;
}
  整体布局声明,文字大小为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提示的容器效果。


阅读(1690) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~