打印

[教程] 用css模拟title和alt的提示效果

Satellite [楼主]

新手上路

帖子: 433
体力: 33
威望: 11
当前: 北京海淀区
离线: 143 天

1^# 大中小发表于 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 威望 +3 鼓励原创，不错加油 2006-9-27 09:53

www.achome.cn

TOP

西部数码VPS主机1G内存仅266元

snwebsite

蓝色怪兽

荣誉管理团队

帖子: 4348
体力: 7370
威望: 69

2^# 大中小发表于 2006-9-27 07:35

参考：http://www.blueidea.com/tech/web/2006/3671.asp

LOST - FRINGE

TOP

广州周立功诚聘—平面/网页/UI/工业设计师 | 天业互联-酷睿租用599￥

wysun369

银牌会员

帖子: 1062
体力: 1655
威望: 3
离线: 2 天

3^# 大中小发表于 2006-9-27 11:19

不错，顶一下！简单实用。

TOP

认证您的手机，获得手机认证图标

，更多手机认证的好处

lscn

拎着猫的耗子

高级会员

帖子: 365
体力: 688
威望: 0
当前: 山东青岛
离线: 1 天

专长 网页设计,UI,Flash

4^# 大中小发表于 2006-9-27 20:29

最近很流行这个效果...

TOP

用CSS布局建站从零开始 | Photoshop中打造史诗般梦幻场景 | 05年第一次软件行业创业的惨痛教训

ejan

初级会员

帖子: 66
体力: 52
威望: 2
当前: 大洋洲澳大利亚
离线: 123 天

5^# 大中小发表于 2006-9-28 03:51

不错，以前用js弄过一个，麻烦

TOP

Satellite [楼主]

新手上路

帖子: 433
体力: 33
威望: 11
当前: 北京海淀区
离线: 143 天

6^# 大中小发表于 2006-9-28 10:16

其实也可以用这个来做二级甚至三级菜单

www.achome.cn

TOP

feelfox

新手上路

帖子: 15
体力: 30
威望: 0
离线: 968 天

7^# 大中小发表于 2006-9-28 17:44

其实简单的说就是利用display属性来控制容器是否显示

TOP

welovemsn

初级会员

帖子: 23
体力: 50
威望: 0
当前: 河南平顶山
离线: 290 天

8^# 大中小发表于 2006-10-20 13:51

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

问题1：position的用法还是不很清楚，那位老哥能举个例子么？
问题2：为什么只能列出一个？

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

TOP

wgh001

高级会员

帖子: 369
体力: 736
威望: 1
离线: 42 天

9^# 大中小发表于 2006-10-20 13:56

不错，虽然以前有看过,但还是要支持一下楼子

TOP

k236740

蓝星国度

中级会员

帖子: 236
体力: 326
威望: 28
当前: 台湾台中
离线: 10 天

专长 网页设计,UI,前端制作

10^# 大中小发表于 2006-10-20 14:15

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

回樓上的老兄:可以列出兩個以上阿~為何不行
把.ao的position改成relative就行了

在網頁設計的領域裡~沒有做不到~只有想不到

TOP

welovemsn

初级会员

帖子: 23
体力: 50
威望: 0
当前: 河南平顶山
离线: 290 天

11^# 大中小发表于 2006-10-20 14:55

谢谢k236740，一语惊醒迷中人啊。

TOP

bluekein

初级会员

帖子: 77
体力: 99
威望: 0
当前: 广东深圳
离线: 1 天

12^# 大中小发表于 2006-10-23 09:51

效果很不错，支持原创！

TOP

mallee

老李飞砖

银牌会员

帖子: 645
体力: 1173
威望: 2
当前: 河北秦皇岛
离线: 1 天

13^# 大中小发表于 2006-10-24 15:08

好用哦！

iw3c.com

TOP

adamghost

初级会员

帖子: 35
体力: 67
威望: 0
离线: 202 天

14^# 大中小发表于 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>

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

不一样蚊子

TOP

yunduan

初级会员

帖子: 35
体力: 52
威望: 0
离线: 17 天

15^# 大中小发表于 2006-10-31 15:22

其实让最后的用层飘起来就可以了~ （相对定位还是有问题，当2行时候，内容会在菜单底下，就是因为前面设置的相对了）

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

::下面的去掉了position:relative ::

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

好像还不完美，还有一些问题，这个办法只能解决一部分问题，这样的提示层很难做到通吃：（~~~~~~

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

1234567890

TOP

clovey

黑屋子里躲猫猫

高级会员

帖子: 1430
体力: 652
威望: 0
离线: 5 天

16^# 大中小发表于 2006-10-31 18:59

ls的第二个方法解决了解释层被遮挡住的问题
不过这些问题我一向都觉得好难搞懂

c-love-y囧

TOP

esnak

高级会员

帖子: 366
体力: 613
威望: 0
离线: 112 天

17^# 大中小发表于 2006-10-31 20:33

不知道控制alt还有什么更好更通用的方法没有。。。。

jgwy-esnak

TOP

blank

怿飞

版主

认证
帖子: 2336
体力: 3413
威望: 115
当前: 浙江杭州

专长 前端制作,JS,WAP

18^# 大中小发表于 2006-11-1 00:09

引用:

原帖由 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值就可以！！

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

个人Blog：PlanABC 团队Blog：淘宝UED 专注Web前端技术！

TOP

ariex

Dreamlessness

金牌会员

帖子: 4486
体力: 4371
威望: 11
当前: 大洋洲澳大利亚

专长 前端制作,C#

19^# 大中小发表于 2006-11-1 00:22

LZ的效果在Opera里面显示有问题，似乎从第二个开始的tip曾都被什么覆盖掉了。。。嗯，是否是Opera不标准所致？

TOP

blank

怿飞

版主

认证
帖子: 2336
体力: 3413
威望: 115
当前: 浙江杭州

专长 前端制作,JS,WAP

20^# 大中小发表于 2006-11-1 00:31

15楼的第2种方法是错误的解决方法！

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

个人Blog：PlanABC 团队Blog：淘宝UED 专注Web前端技术！

TOP

wgh001

高级会员

帖子: 369
体力: 736
威望: 1
离线: 42 天

21^# 大中小发表于 2006-11-1 08:59

哈哈，学习中呀

TOP

yunduan

初级会员

帖子: 35
体力: 52
威望: 0
离线: 17 天

22^# 大中小发表于 2006-11-1 10:49

引用:

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

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

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

1234567890

TOP

blank

怿飞

版主

认证
帖子: 2336
体力: 3413
威望: 115
当前: 浙江杭州

专长 前端制作,JS,WAP

23^# 大中小发表于 2006-11-1 13:31

回楼上，我说是错误的解决方法，只是解决方法不好！！

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

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

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

引用:

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

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

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

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

个人Blog：PlanABC 团队Blog：淘宝UED 专注Web前端技术！

TOP

yunduan

初级会员

帖子: 35
体力: 52
威望: 0
离线: 17 天

24^# 大中小发表于 2006-11-3 10:30

我说相对定位还是有问题！
你说只是解决方法不好！
————————————————————
其实都一样，我再详细解释一下：

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

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

总结：所以我个人喜欢第一个，简单！

1234567890

TOP

duluohua

月亮上的狗

银牌会员

帖子: 677
体力: 1232
威望: 0
当前: 江苏苏州
离线: 4 天

专长 前端制作,ASP,.NET

25^# 大中小发表于 2006-11-3 18:47

效果不错不过感觉列向排列会覆盖提示层的问题没有解决...

TOP

SoftHt

土豆小子

中级会员

帖子: 175
体力: 314
威望: 0
当前: 北京海淀区
离线: 203 天

26^# 大中小发表于 2006-11-3 18:57

真不错！

TOP

mechillehot

新手上路

帖子: 47
体力: 21
威望: 0
当前: 北京朝阳区
离线: 24 天

27^# 大中小发表于 2006-11-3 19:00

不错。学习学习~~~

Maxspeeds.com

TOP

gy132

新手上路

帖子: 19
体力: 42
威望: 0
离线: 783 天

28^# 大中小发表于 2007-3-9 15:51

我的这个怎么不行呢？
郁闷。

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

TOP

gy132

新手上路

帖子: 19
体力: 42
威望: 0
离线: 783 天

29^# 大中小发表于 2007-3-9 15:54

难道真的要像书上说要设置 .info:hover 里的
font-size为100% ，
但是我不想让字体的大小变化么

TOP

yougucaofan

银牌会员

帖子: 1166
体力: 2136
威望: 0
离线: 39 天

30^# 大中小发表于 2007-3-9 22:37

郁闷，可多地方都有，我见过的不下三次

忍受。一定要学会忍受。

TOP