ITPub博客

首页 > IT职业 > IT图书 > css模拟title和alt的提示效果

css模拟title和alt的提示效果

原创 IT图书 作者:chunzhisu 时间:2014-08-29 11:47:06 0 删除 编辑

点击(此处)折叠或打开

  1. <style>
  2. .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才能使提示层跟着链接走*/
  3. .info:hover {background:#eee;color:#333;}
  4. .info span {display: none }/*设置正常下的span为隐藏状态*/
  5. .info:hover span /*设置hover下的span属性为呈现状态,并设置提示层的位置*/{display:block;position:absolute;top:30px;left:60px;width:130px;
  6. border:1px solid #ff0000; background:#fff; color:#000;padding:5px;text-align:left;}
  7. </style>
  8. <body>
  9. <a class=\"info\" \">QQ空间站QQ空间站!
  10. info\" \">QQ空间站<span>QQ空间站!</span></a>
  11. <a class=\"info\" \">QQ空间站QQ空间站!
  12. info\" \">QQ空间站<span>QQ空间站!</span></a>
  13. </body>

来自 “ ITPUB博客 ” ,链接:https://blog.itpub.net/29737856/viewspace-1260044/ ,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论

注册时间:2014-07-04

  • 博文量
    95
  • 访问量
    122213