相关文章
网站制作Robots Meta标签及其用法
北京网页设计用CSS制作具有亲和力的表单
北京网站建设经验分享：网页设计中实用的制作技巧
北京网站设计个人学习总结：如何学习网页技术CSS
企通互联用Photoshop轻松模拟红外效果图
北京网站制作关于网页背景的设计技巧
网站建设网页设计配色应用实例剖析之红色系讲解
网站建设5款纯div+css制作的弹出菜单(标准且无js)
企通互联使用自定义HTML标签来进行网页设计
北京网页设计Adobe Fireworks CS3的新特性
品牌理念
北京网站建设最佳合作伙伴
北京网站建设专家企通互联
竭诚为您提供网站建设服务!
友好连接
文章搜索
你的位置：首页 >> 网页设计 >> 北京网站设计北京网站建设css模拟title和alt的提示效果
北京网站设计北京网站建设css模拟title和alt的提示效果
这段时间写了很多页面代码，除了一些知识重复以外，也学到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>网站制作 网站建设 中.国.站长站 www.qitongnet.com
.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.achome.cn">www.achome.cn<span>这是我的个人blog，里面有一些网站设计和制作的东东，希望大家常来交流</span></a>
<a class="info" href="http://www.achome.cn">www.achome.cn<span>这是我的个人blog，里面有一些网站设计和制作的东东，希望大家常来交流</span></a>北京网页设计
<a class="info" href="http://www.achome.cn">www.achome.cn<span>这是我的个人blog，里面有一些网站设计和制作的东东，希望大家常来交流</span></a>网站设计
<a class="info" href="http://www.achome.cn">www.achome.cn<span>这是我的个人blog 北京网站设计，里面有一些网站设计和制作的东东，希望大家常来交流</span></a>网页设计
</body>
中国站.长站
上一篇：北京网站制作css模拟title和alt的提示效果
下一篇：北京网站设计CSS技巧学习：像table一样布局div
