分析：在鼠標懸停的時候出現一個包含介紹文字的提示層，如果用傳統的javascript來實現，就要設置對象的onmouseover和onmouseout屬性，而如果把對象看作是a屬性中的link和hover的話，這個問題就更清晰了，因為只要把對象的link屬性設置為隱藏提示層、hover屬性設置為呈現提示層即可，那么這個提示層的位置究竟在哪里呢？當然是在a標簽中間了，目前常用的辦法是把提示內容放在span標簽中間進而包含在a標簽內部，然后設置a：link和a：hover下不同的span樣式即可。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style> .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;} .info:hover {background:#eee;color:#333;} .info span {display: none } .info:hover span {display:block;position:absolute;top:30px;left:60px;width:130px;border:1px solid #ff0000; background:#fff; color:#000;padding:5px;text-align:left;} </style> </head> <body> <a class="info" href="http://www.jssanhong.com">www.jssanhong.com<span>歡迎每一位到訪的朋友，非常希望能與網站設計愛好者們交流。</span></a> <a class="info" href="http://www.jssanhong.com">www.jssanhong.com<span>歡迎每一位到訪的朋友，非常希望能與網站設計愛好者們交流。</span></a> <a class="info" href="http://www.jssanhong.com">www.jssanhong.com<span>歡迎每一位到訪的朋友，非常希望能與網站設計愛好者們交流。</span></a> <a class="info" href="http://www.jssanhong.com">www.jssanhong.com<span>歡迎每一位到訪的朋友，非常希望能與網站設計愛好者們交流。</span></a> <a class="info" href="http://www.jssanhong.com">www.jssanhong.com<span>歡迎每一位到訪的朋友，非常希望能與網站設計愛好者們交流。</span></a> </body> |