纯CSS tooltip 提示

浏览数：18 / 时间：2015年06月09日

一般的tooltip，使用超链接的title，或者是css+javascript生成。

如果页面布局合理，样式结构清晰，可以使用纯CSS的提示。

demo如下：

 a.tooltip {
            position: relative;
        }

            a.tooltip span {
                display: none;
            }

            a.tooltip:hover span {
                display: block;
                position: absolute;
                top: 1em;
                left: 6px;
                padding:3px 3px;
                border:1px solid #ad7d7d;
                background-color:#ffff66;
                color:#000;
            }

<div>
   <a href="http://www.w3cplus.com/blog/tags/302.html" class="tooltip">SASS<span> SASS是一种CSS的开发工具，提供了许多便利的写法，大大节省了设计者的时间，使得CSS的开发，变得简单和可维护。</span>
   </a>
</div>

纯CSS tooltip 提示,古老的榕树,5-wow.com

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： http it color class java html 代码 lu top blog oc http it color class java html 代码 lu top blog oc

相关文章

随机文章

您可能还喜欢

您可能还喜欢