纯CSS实现自定义工具提示
所谓工具提示是指鼠标悬停在具有title属性的元素上时一些浏览器弹出的小文本框。
精通CSS里面介绍了一种纯CSS实现的工具提示,小指感觉很有意思,摘出来与诸君共享。
这里利用的是CSS的定位技术:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Example for tooltip</title> <style type="text/css"> a.tooltip { position: relative; } a.tooltip span { display: none; } a.tooltip:hover span { display: block; position: absolute; top: 1em; left: 2em; padding: 0.2em 0.6em; border: 1px solid #996633; background-color: #FFFF66; color: #000; white-space: nowrap; } </style> </head> <body> <p> <a href="http://www.qingzz.cn/"class="tooltip">www.qingzz.cn<span>(A wonderful website for you!)</span></a> is a website powered by emlog. </p> </body> </html>
其中主要是设置父元素position:relative;从而可以使工具提示根据父元素定位。需要使用的自己美化吧~
点赞1
支持一下