wwwad
数字引擎三线路主机空间
大蒜瓣 = 免费拥有海量下载站
标题: [教程] 用css模拟title和alt的提示效果
Satellite

中级会员


帖子 398
体力 206
注册 2005-5-22
发表于 2006-9-26 23:14  资料 主页 短消息 
这段时间写了很多页面代码,除了一些知识重复以外,也学到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.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>

效果观看:

 提示:您可以先修改部分代码再运行

本帖最近评分记录
greengnn   2006-9-27 09:53  威望  +3   鼓励原创,不错加油




[广告] Flash 开源 2d 物理引擎 收集
snwebsite

蓝色怪兽
版主



帖子 1981
体力 3644
注册 2006-1-23
发表于 2006-9-27 07:35  资料 短消息 




[广告] Flash 开源 2d 物理引擎 收集
wysun369

高级会员


帖子 307
体力 849
注册 2005-5-7
发表于 2006-9-27 11:19  资料 短消息 
不错,顶一下!简单实用。




lscn

中级会员


帖子 153
体力 282
注册 2006-8-4
发表于 2006-9-27 20:29  资料 短消息 
最近很流行这个效果...




ejan

注册会员


帖子 54
体力 60
注册 2002-9-8
发表于 2006-9-28 03:51  资料 主页 短消息 
不错,以前用js弄过一个,麻烦




Satellite

中级会员


帖子 398
体力 206
注册 2005-5-22
发表于 2006-9-28 10:16  资料 主页 短消息 
其实也可以用这个来做二级甚至三级菜单




feelfox

新手上路


帖子 15
体力 30
注册 2006-8-9
发表于 2006-9-28 17:44  资料 短消息 
其实简单的说就是利用display属性来控制容器是否显示




welovemsn

新手上路


帖子 13
体力 29
注册 2006-10-20
发表于 2006-10-20 13:51  资料 短消息 


 提示:您可以先修改部分代码再运行
问题1:position的用法还是不很清楚,那位老哥能举个例子么?
问题2:为什么只能列出一个?

[ 本帖最后由 welovemsn 于 2006-10-20 13:58 编辑 ]




wgh001

高级会员


帖子 305
体力 621
注册 2005-12-28
发表于 2006-10-20 13:56  资料 短消息 
不错,虽然以前有看过,但还是要支持一下楼子




k236740

注册会员


帖子 113
体力 182
注册 2005-8-2
发表于 2006-10-20 14:15  资料 主页 短消息 


 提示:您可以先修改部分代码再运行
回樓上的老兄:可以列出兩個以上阿~為何不行
把.ao的position改成relative就行了




暫時沒有
welovemsn

新手上路


帖子 13
体力 29
注册 2006-10-20
发表于 2006-10-20 14:55  资料 短消息 
谢谢k236740,一语惊醒迷中人啊。




bluekein

注册会员


帖子 30
体力 54
注册 2006-5-19
发表于 2006-10-23 09:51  资料 短消息 
效果很不错,支持原创!




mallee

高级会员


帖子 187
体力 615
注册 2005-10-26
发表于 2006-10-24 15:08  资料 主页 短消息 
好用哦!




adamghost

注册会员


帖子 35
体力 67
注册 2006-3-22
发表于 2006-10-28 21:16  资料 短消息 
why not use tag

"<acronym></acronym>"

description:

"The <acronym> tag indicates that the enclosed text is an acronym, an abbreviation formed from the first letter of each word in a name or phrase, such as HTML or IBM. Like <abbr>, the popular browsers don't appear to change the display of the <acronym> content-based style tag. "
----------<<Oreilly.HTML.And.XHTML.The.Definitive.Guide.5th.Edition.>>

<body>
<acronym title="这是我的个人blog,里面有一些网站设计和制作的东东"><a href="http://www.achome.cn">www.achome.cn</a></span></acronym>
</body>



 提示:您可以先修改部分代码再运行




不一样蚊子
yunduan

新手上路


帖子 18
体力 28
注册 2004-11-28
发表于 2006-10-31 15:22  资料 主页 短消息 
其实让最后的用层飘起来就可以了~ (相对定位还是有问题,当2行时候,内容会在菜单底下,就是因为前面设置的相对了)

 提示:您可以先修改部分代码再运行
::下面的去掉了position:relative ::

 提示:您可以先修改部分代码再运行
好像还不完美,还有一些问题,这个办法只能解决一部分问题,这样的提示层很难做到通吃:(~~~~~~

[ 本帖最后由 yunduan 于 2006-10-31 15:32 编辑 ]




1234567890
clovey

中级会员


帖子 292
体力 359
注册 2006-8-17
发表于 2006-10-31 18:59  资料 短消息 
ls的第二个方法解决了解释层被遮挡住的问题
不过这些问题我一向都觉得好难搞懂




清汤西红柿^_^毕业咯
esnak

注册会员


帖子 92
体力 60
注册 2006-2-22
发表于 2006-10-31 20:33  资料 短消息 
不知道控制alt还有什么更好更通用的方法没有。。。。




jgwy-esnak
blankzheng

中级会员


帖子 178
体力 314
注册 2005-10-21
发表于 2006-11-1 00:09  资料 主页 短消息 


QUOTE:
原帖由 yunduan 于 2006-10-31 15:22 发表
其实让最后的用层飘起来就可以了~ (相对定位还是有问题,当2行时候,内容会在菜单底下,就是因为前面设置的相对了)


<style type="text/css">
.info {position:relative;background:#ff ...

你所说的情况可以设置“info“和“info:hover”的z-index属性解决,只需要让“info:hover”的z-index值大于“info”的z-index值就可以!!

 提示:您可以先修改部分代码再运行




ariex

高级会员


帖子 327
体力 954
注册 2004-5-7
发表于 2006-11-1 00:22  资料 短消息 
LZ的效果在Opera里面显示有问题,似乎从第二个开始的tip曾都被什么覆盖掉了。。。嗯,是否是Opera不标准所致?




blankzheng

中级会员


帖子 178
体力 314
注册 2005-10-21
发表于 2006-11-1 00:31  资料 主页 短消息 
15楼的第2种方法是错误的解决方法!

[ 本帖最后由 blankzheng 于 2006-11-1 00:44 编辑 ]




wgh001

高级会员


帖子 305
体力 621
注册 2005-12-28
发表于 2006-11-1 08:59  资料 短消息 
哈哈,学习中呀




yunduan

新手上路


帖子 18
体力 28
注册 2004-11-28
发表于 2006-11-1 10:49  资料 主页 短消息 


QUOTE:
原帖由 blankzheng 于 2006-11-1 00:31 发表
15楼的第2种方法是错误的解决方法!

郁闷,错再那里哦~~~ 说一下看看? 你弄的优先级别我明白~~~~~ 不过我的代码好像简洁,不加相对定位也没有问题,也少加2个优先级,(最后的绝对定位,也要少了TBLR)。

之前说的相对有问题好像说错,我的意思是代码可以更简单!




1234567890
blankzheng

中级会员


帖子 178
体力 314
注册 2005-10-21
发表于 2006-11-1 13:31  资料 主页 短消息 
回楼上,我说是错误的解决方法,只是解决方法不好!!

下面解释一下为什么这样说:

如果你把你两段代码中.info:hover span的marigin属性去掉,加上top:0;left:0;你会发现有所区别。

当然这和position:relative|相对定位有关:

QUOTE:
如果用到相对定位,紧随他的层div2是不会出现在div1的下方,而是和div1在同一个高度出现。

你会发现只有定义了position:relative你才能对漂浮的提示位置进行比较准确简便的定位!

对于这个你可以自己测试一下你第二种代码,定位是不是很麻烦,至于在其他浏览器的兼容问题暂时没有进行测试,到底第二段代码时候能用!

[ 本帖最后由 blankzheng 于 2006-11-1 13:34 编辑 ]




yunduan

新手上路


帖子 18
体力 28
注册 2004-11-28
发表于 2006-11-3 10:30  资料 主页 短消息 
我说相对定位还是有问题!
你说只是解决方法不好!
————————————————————
其实都一样,我再详细解释一下:

1. 去掉了position:relative,在去掉TBLR,这样的话,最后飘起来的层是以他的父层左上角为原点(所以是能跟着飘的),因此我加上MARGIN来控制位置。

2. 因为加上了position:relative,我对这个很反感,因为他不是很好用,有时候在具体开发上,(父层加上position:relative,可能会有问题) 或者根本就能不要的!

总结:所以我个人喜欢第一个,简单!




1234567890
duluohua

注册会员


帖子 65
体力 135
注册 2005-8-4
发表于 2006-11-3 18:47  资料 主页 短消息 
效果不错 不过感觉列向排列会覆盖提示层的问题没有解决...




SoftHt

中级会员


帖子 162
体力 279
注册 2006-6-7
发表于 2006-11-3 18:57  资料 短消息 
真不错!




mechillehot

注册会员


帖子 25
体力 57
注册 2005-3-19
发表于 2006-11-3 19:00  资料 短消息 
不错。学习学习~~~






 



京ICP证 060692 号 / 电子公告服务(BBS)审批[2006]字第386号 / 京ICP备05002321号 / 当前时区 GMT+8, 现在时间是 2006-11-16 10:52

    Powered by Discuz! 5.0.0 Licensed  © 1999-2006 Blueidea.Inc.
Processed in 0.075180 second(s), 7 queries , Gzip enabled

清除 Cookies - 联系我们 - blueidea.com - Archiver - WAP