|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www./1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> <title>页面标题</title> <style> /*设置链接的属性,一定要设置为relative才能使提示层跟着链接走*/ .info { position:relative; background:#fff; color:#666; text-decoration:none; font-size:12px; width:150px; padding:5px; text-align:center; border:1px solid#ccc; height:25px; line-height:25px; } .info:hover {background:#eee;color:#333;} .info span {display: none }/*设置正常下的span为隐藏状态*/ /*设置hover下的span属性为呈现状态,并设置提示层的位置*/ .info:hover span{ display:block; position:absolute; top:35px; left:50px; width:130px; border:1px solid #ff0000; background:#fff; color:#000; padding:5px; text-align:left; } </style> </head> <body> <a class="info" href="http://www.baidu.com">百度<span>显示百度了吗?</span></a> <a class="info" href="http://www.360doc.com">360doc<span>欢迎进入360图书馆，错了，好像不是360的</span></a> </body> </html>
|
|
|
来自： 尹旭东 > 《HTML_CSS》
