css實現的當滑鼠懸浮彈出說明層效果:本章節分享一段代碼實例，它是使用純css實現的滑鼠懸浮彈出說明層效果。代碼實例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http:
css實現的當滑鼠懸浮彈出說明層效果:
本章節分享一段代碼實例，它是使用純css實現的滑鼠懸浮彈出說明層效果。
代碼實例如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> div{ clear:both; margin:5px 0 0 0; font-size:12px; line-height:22px; } a.alt{ position:relative; background-color:#fff; float:left; width:158px; height:20px; margin:0 auto; border:1px solid #eee; text-align:center; text-decoration:none; color:#0066cc; } a.alt:hover{ background:#fff; text-decoration:none; z-index:2; } a.alt span{ display:none; } a.alt:hover span{ position:absolute; display:block; top:-1px; left:158px; width:130px; height:30px; border:1px solid #eee; z-index:1; } </style> </head> <body> <div><a class="alt" href="/"><span>前端網站</span>螞蟻部落</a></div> <div><a class="alt" href="/"><span>網址是softwhy.com</span>antzone</a></div> </body> </html>
在預設狀態下span元素是隱藏的，當滑鼠懸浮的時候，下麵的CSS代碼就會立馬生效:
a.alt:hover span{ position:absolute; display:block; top:-1px; left:158px; width:130px; height:30px; border:1px solid #eee; z-index:1; }
採用絕對定位的方式，將這個彈出層定位於鏈接的右側。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=18143
更多內容可以參閱:http://www.softwhy.com/divcss/
