css模擬title和alt的提示效果

2020-03-24 18:59:21

字體：大中小

來源：轉載

供稿：網友

這段時間寫了很多頁面代碼，除了一些知識重復以外，也學到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 www.achome.cn span 這是我的個人blog，里面有一些網站設計和制作的東東 /span /a
a www.achome.cn span 這是我的個人blog，里面有一些網站設計和制作的東東，希望大家常來交流 /span /a
a www.achome.cn span 這是我的個人blog，里面有一些網站設計和制作的東東，希望大家常來交流 /span /a
a www.achome.cn span 這是我的個人blog，里面有一些網站設計和制作的東東，希望大家常來交流 /span /a
a 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 www.achome.cn span 這是我的個人blog，里面有一些網站設計和制作的東東，希望大家常來交流 /span /a
a www.achome.cn span 這是我的個人blog，里面有一些網站設計和制作的東東，希望大家常來交流 /span /a
a www.achome.cn span 這是我的個人blog，里面有一些網站設計和制作的東東，希望大家常來交流 /span /a
a www.achome.cn span 這是我的個人blog，里面有一些網站設計和制作的東東，希望大家常來交流 /span /a
a www.achome.cn span 這是我的個人blog，里面有一些網站設計和制作的東東，希望大家常來交流 /span /a
/body 本文作者:html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：HTML和CSS實現字體加粗的三種方法

下一篇：教你用快車一網打盡CSS中的圖片保存