css類比title和alt的提示效果

來源:互聯網
上載者:User
css

這段時間寫了很多頁面代碼,除了一些知識重複以外,也學到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 全部選擇 提示:你可先修改部分代碼,再按運行]



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。