css模拟title和alt的提示效果
作者：Satellite 来源：蓝色理想 时间：2007-11-08 13:03:00
这段时间写了很多页面代码，除了一些知识重复以外，也学到css的一些新东西，或许是旧东西，但是还是希望能对大家有用。
其实在css里面有很多对a的样式应用，因为a标签是仅有的默认可以触发动作的标签，因此在很多时候可以用css来控制a达到js才能达到的效果，比如今天要介绍的css仿title和alt的提示效果：
先来分析一下这种效果的特点，无非就是在鼠标悬停的时候出现一个包含介绍文字的提示层，如果用传统的javascript来实现，就要设置对象的onmouseover和onmouseout属性，而如果把对象看作是a属性中的link和hover的话，这个问题就更清晰了，因为只要把对象的link属性设置为隐藏提示层、hover属性设置为呈现提示层即可，那么这个提示层的位置究竟在哪里呢？当然是在a标签中间了，目前常用的办法是把提示内容放在span标签中间进而包含在a标签内部，然后设置a：link和a：hover下不同的span样式即可。
下面结合代码给大家说一下这个简单的原理：
<style>
.info {position:relative;background:#fff;color:#666; text-decoration:none;font-size:12px;width:150px;text-align:center;border:1px solid #ccc;height:25px;line-height:25px;}/*设置链接的属性,一定要设置为relative才能使提示层跟着链接走*/
.info:hover {background:#eee;color:#333;}
.info span {display: none }/*设置正常下的span为隐藏状态*/
.info:hover span /*设置hover下的span属性为呈现状态,并设置提示层的位置*/{display:block;position:absolute;top:30px;left:60px;width:130px;
border:1px solid #ff0000; background:#fff; color:#000;padding:5px;text-align:left;}
</style>
<body>
<a class="info" href="http://www.achome.cn">www.achome.cn<span>这是我的个人blog，里面有一些网站设计和制作的东东</span></a>
<a class="info" href=http://www.aspxhome.com>www.aspxhome.com<span>asp之家，希望大家常来交流</span></a>
<a class="info" href="http://www.achome.cn">www.achome.cn<span>这是我的个人blog，里面有一些网站设计和制作的东东，希望大家常来交流</span></a>
<a class="info" href=http://www.aspxhome.com>www.aspxhome.com<span>asp之家，致力于为Asp学习者提供专业而高质量的Asp内容！</span></a>
<a class="info" href="http://www.achome.cn">www.achome.cn<span>这是我的个人blog，里面有一些网站设计和制作的东东，希望大家常来交流</span></a>
</body>
效果演示：
运行代码框
相关文章推荐：CSS实例讲解:地图提示
标签：title,alt,提示,css
0
投稿猜你喜欢
随机显示图片
2009-07-26 10:13:00
SQL Server数据库触发器安全隐患解析
2009-03-25 12:56:00
vuex 多模块时 模块内部的mutation和action的调用方式
2024-04-09 10:47:11
Dreamweaver里使用层的一些建议
2010-03-25 12:27:00
Sanic框架蓝图用法实例分析
2022-12-22 16:27:20
python中使用.py配置文件的方法详解
2022-02-13 19:57:22
Python实例详解递归算法
2023-05-17 02:25:06
彻底搞懂Python字符编码
2023-10-14 01:05:03
CentOS7离线安装MySQL的教程详解
2024-01-20 13:07:33
python模块和包的应用BASE_PATH使用解析
2021-04-15 09:46:36
Python基于纹理背景和聚类算法实现图像分割详解
2023-11-15 20:05:46
基于python实现模拟数据结构模型
2022-11-12 23:44:01
Python GUI布局工具Tkinter入门之旅
2021-11-08 14:38:23
javaScript通用数据类型校验函数
2009-07-06 12:49:00
浅谈tensorflow模型保存为pb的各种姿势
2023-02-01 21:19:05
python实现任意位置文件分割的实例
2021-01-17 18:18:22
老生常谈Session和Cookie之间区别与联系(必看篇)
2023-03-09 20:53:24
浅析SQL Server中包含事务的存储过程
2024-01-15 21:27:39
python+Django实现防止SQL注入的办法
2022-05-22 13:13:13
Python常见内置高阶函数即高阶函数用法
2021-03-19 20:38:07
