這段時間寫了很多頁面代碼，除了一些知識重複以外，也學到css的一些新東西，或許是舊東西，但是還是希望能對大家有用。
其實在css裡面有很多對a的樣式應用，因為a標籤是僅有的預設可以觸發動作的標籤，因此在很多時候可以用css來控制a達到js才能達到的效果，比如今天要介紹的css仿title和alt的提示效果：
先來分析一下這種效果的特點，無非就是在滑鼠移至上方的時候出現一個包含介紹文字的提示層，如果用傳統的javascript來實現，就要設定對象的onmouseover和onmouseout屬性，而如果把對象看作是a屬性中的link和hover的話，這個問題就更清晰了，因為只要把對象的link屬性設定為隱藏提示層、hover屬性設定為呈現提示層即可，那麼這個提示層的位置究竟在哪裡呢？當然是在a標籤中間了，目前常用的辦法是把提示內容放在span標籤中間進而包含在a標籤內部，然後設定a：link和a：hover下不同的span樣式即可。
下面結合代碼給大家說一下這個簡單的原理：
<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;}/*設定連結的屬性,一定要設定為relative才能使提示層跟著連結走*/
.info:hover {background:#eee;color:#333;}
.info span {display: none }/*設定正常下的span為隱藏狀態*/
.info:hover span /*設定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>
<body>
<a class="info" href="http://www.achome.cn">www.achome.cn<span>這是我的個人blog，裡面有一些網站設計和製作的東東</span></a>
<a class="info" href="http://www.achome.cn">www.achome.cn<span>這是我的個人blog，裡面有一些網站設計和製作的東東，希望大家常來交流</span></a>
<a class="info" href="http://www.achome.cn">www.achome.cn<span>這是我的個人blog，裡面有一些網站設計和製作的東東，希望大家常來交流</span></a>
<a class="info" href="http://www.achome.cn">www.achome.cn<span>這是我的個人blog，裡面有一些網站設計和製作的東東，希望大家常來交流</span></a>
<a class="info" href="http://www.achome.cn">www.achome.cn<span>這是我的個人blog，裡面有一些網站設計和製作的東東，希望大家常來交流</span></a>
</body>
效果示範：
運行代碼框
<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><body><a class="info" href="http://www.achome.cn">www.achome.cn<span>這是我的個人blog，裡面有一些網站設計和製作的東東，希望大家常來交流</span></a><a class="info" href="http://www.achome.cn">www.achome.cn<span>這是我的個人blog，裡面有一些網站設計和製作的東東，希望大家常來交流</span></a><a class="info" href="http://www.achome.cn">www.achome.cn<span>這是我的個人blog，裡面有一些網站設計和製作的東東，希望大家常來交流</span></a><a class="info" href="http://www.achome.cn">www.achome.cn<span>這是我的個人blog，裡面有一些網站設計和製作的東東，希望大家常來交流</span></a><a class="info" href="http://www.achome.cn">www.achome.cn<span>這是我的個人blog，裡面有一些網站設計和製作的東東，希望大家常來交流</span></a></body>
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
