这段时间写了很多页面代码,除了一些知识重复以外,也学到c 的一些新东西,或许是旧东西,但是还是希望能对大家有用。
其实在c 里面有很多对a的样式应用,因为a标签是仅有的默认可以触发动作的标签,因此在很多时候可以用c 来控制a达到js才能达到的效果,比如今天要介绍的c 仿title和alt的提示效果:
先来分析一下这种效果的特点,无非就是在鼠标悬停的时候出现一个包含介绍文字的提示层,如果用传统的javascript来实现,就要设置对象的onmouseover和onmouseout属性,而如果把对象看作是a属性中的link和hover的话,这个问题就更清晰了,因为只要把对象的link属性设置为隐藏提示层、hover属性设置为呈现提示层即可,那么这个提示层的位置究竟在哪里呢?当然是在a标签中间了,目前常用的办法是把提示内容放在 an标签中间进而包含在a标签内部,然后设置a:link和a:hover下不同的 an样式即可。
下面结合代码给大家说一下这个简单的原理:
< an cla ="code">< tyle>
.info {position:relative ackground:#fff;color:#666; text-decoration:none;font-size:12px;width:150px;text-align:center order:1px solid #ccc;height:25px;line-height:25px;}/*设置链接的属性,一定要设置为relative才能使提示层跟着链接走*/
.info:hover {background:#eee;color:#333;}
.info an {di lay: none }/*设置正常下的 an为隐藏状态*/
.info:hover an /*设置hover下的 an属性为呈现状态,并设置提示层的位置*/{di lay:block osition:a olute;top:30px;left:60px;width:130px;
border:1px solid #ff0000; background:#fff; color:#000 adding:5px;text-align:left;}
</style>
< ody>
<a cla ="info" href=http://www.m.com/html/wangyesheji/20070905/"http:/www.achome.c quot gt;www.achome.c lt a gt;这是我的个人blog,里面有一些网站设计和制作的东东</ a gt lt;/a>
<a cla ="info" href=http://www.m.com/html/wangyesheji/20070905/"http:/www.achome.c quot gt;www.achome.c lt a gt;这是我的个人blog,里面有一些网站设计和制作的东东,希望大家常来交流</ a gt lt;/a>
<a cla ="info" href=http://www.m.com/html/wangyesheji/20070905/"http:/www.achome.c quot gt;www.achome.c lt a gt;这是我的个人blog,里面有一些网站设计和制作的东东,希望大家常来交流</ a gt lt;/a>
<a cla ="info" href=http://www.m.com/html/wangyesheji/20070905/"http:/www.achome.c quot gt;www.achome.c lt a gt;这是我的个人blog,里面有一些网站设计和制作的东东,希望大家常来交流</ a gt lt;/a>
<a cla ="info" href=http://www.m.com/html/wangyesheji/20070905/"http:/www.achome.c quot gt;www.achome.c lt a gt;这是我的个人blog,里面有一些网站设计和制作的东东,希望大家常来交流</ a gt lt;/a>
</body> an>
代码框
< an>
an>