貌似有一段时间忘记整理，本次内容是Pure CSS Tool tips，也就是纯用CSS实现信息条。
传统的提示条，要么用编写可浮动table或div，或者直接在图片上加 alt 属性，
但是这样麻烦，而且很多过程不符合规矩。
那么这里介绍一种纯CSS的解决办法。
思路如下，将说明部分用安置在图片附近，设置为不可视，定位设置为关联
，然后将鼠标滑过的风格设置为你想让别人看到的风格。
首先定义一个类info，直接定义a.info 是因为为了方便修饰主体，因为主体可能
是一个连接，或者是非链接，非链接的话就设置为链接到 "#"就行了。
CSS 代码
[CODE]a.info{ position:relative; /*this is the key*/ text-decoration: none; } a.info span{ display: none } a.info:hover span{ display:block; position:absolute; top:20px; left:30px; border:1px solid #FFFFFF; background-color:#9C9FC8; color:#D72579; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; z-index: 8; }[/CODE]
展开阅读全部..
Category : 电脑与网络/教程收集
