文章插图
文章插图
【鼠标悬停TIP的CSS实例方案】在实际开发中，我们会给图片加上alt、给链接加上title，为了出故障预备，也可以提醒用户的内容是什么，或仅仅是tip提示 。今天我们介绍一款不错的鼠标悬停TIP效果，图片如下：
这样的效果在实际开发中是非常有用的 。我们可以为我们的链接加上这样的效果，以更加体现网页的亲和力与易用性 。我们也可以在提供下载的链接下提供这样的tip提示 。我们看这样的鼠标悬停TIP效果是如何实现的 。看下面的XHTML代码：
Div CSS教程dushuwu.net Div CSS教程
在链接A标签中，嵌套了span与p标签，这就是我们的tip的基本元素了，我们看CSS如何控制显示它 。CSS代码如下：
整体布局声明，文字大小为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提示的容器效果 。
以上就是鼠标悬停TIP的CSS实例方案，希望大家喜欢，请继续关注我们 。
推荐阅读
- 宿舍可以用热水壶吗
- 微信转账收手续费吗
- 简体字是什么时候开始实行的啊
- 关于失恋后回忆的句子
- AutoCAD 2014怎么安装？AutoCAD2014安装及激活教程
- 伏见桃山什么意思
- 怎么通过qq邮箱查找qq号详细教程
- 盛夏未来ming接电话说话了吗
- CSS关于分辨率的使用及百分比自适应布局