您現(xiàn)在的位置： 365建站網(wǎng) > 365文章 > css模擬title和alt的提示效果

css模擬title和alt的提示效果

文章來源：365jz.com 點擊數(shù)：228 更新時間：2008-07-10 08:27 參與評論

這段時間寫了很多頁面代碼，除了一些知識重復(fù)以外，也學(xué)到css的一些新東西，或許是舊東西，但是還是希望能對大家有用。

其實在css里面有很多對a的樣式應(yīng)用，因為a標(biāo)簽是僅有的默認(rèn)可以觸發(fā)動作的標(biāo)簽，因此在很多時候可以用css來控制a達(dá)到j(luò)s才能達(dá)到的效果，比如今天要介紹的css仿title和alt的提示效果：

先來分析一下這種效果的特點，無非就是在鼠標(biāo)懸停的時候出現(xiàn)一個包含介紹文字的提示層，如果用傳統(tǒng)的javascript來實現(xiàn)，就要設(shè)置對象的onmouseover和onmouseout屬性，而如果把對象看作是a屬性中的link和hover的話，這個問題就更清晰了，因為只要把對象的link屬性設(shè)置為隱藏提示層、hover屬性設(shè)置為呈現(xiàn)提示層即可，那么這個提示層的位置究竟在哪里呢？當(dāng)然是在a標(biāo)簽中間了，目前常用的辦法是把提示內(nèi)容放在span標(biāo)簽中間進(jìn)而包含在a標(biāo)簽內(nèi)部，然后設(shè)置a：link和a：hover下不同的span樣式即可。

下面結(jié)合代碼給大家說一下這個簡單的原理：

效果演示：
<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://theartemis.cn這是我的個人blog，里面有一些網(wǎng)站設(shè)計和制作的東東，希望大家常來交流</a>
<a class="info" href="http://theartemis.cn這是我的個人blog，里面有一些網(wǎng)站設(shè)計和制作的東東，希望大家常來交流</a>
<a class="info" href="http://theartemis.cn這是我的個人blog，里面有一些網(wǎng)站設(shè)計和制作的東東，希望大家常來交流</a>
<a class="info" href="http://theartemis.cn這是我的個人blog，里面有一些網(wǎng)站設(shè)計和制作的東東，希望大家常來交流</a>
<a class="info" href="http://theartemis.cn這是我的個人blog，里面有一些網(wǎng)站設(shè)計和制作的東東，希望大家常來交流</a>
</body>