DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> css實現鼠標懸停時滑出層提示的方法
css實現鼠標懸停時滑出層提示的方法
編輯:CSS詳解     

本文實例講述了css實現鼠標懸停時滑出層提示的方法。分享給大家供大家參考。具體分析如下:

這是一個簡單的鼠標懸停提示特效,類似於alt標簽,不過這一種是用純CSS實現,擴展性好,而且在提示的層裡可以加入圖片或其它布局,這個要根據你的需要了。

 

代碼如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css實現層提示</title>
<style>
div{
clear:both;
margin:5px 0 0 0;
font-size:12px;
line-height:22px;
}
a.alt{
position:relative;
background-color:#fff;
float:left;
width:158px;height:20px;
margin:0 auto;
border:1px solid #eee;
text-align:center;
text-decoration:none;
color:#0066cc;
}
a.alt:hover{
background:#fff;
text-decoration:none;z-index:2;
}
a.alt span{
display:none;
}
a.alt:hover span{
position:absolute;
display:block;
top:-1px;left:158px;
width:130px;height:60px;
border:1px solid #eee;
z-index:1;
}
</style>
</head>
<body>
<div>
<a class='alt' href="/"><span>一個高品質腳本資料網站</span></a>
</div>
<div>
<a class='alt' href="/"><span>給你實用的CSS代碼</span>網頁特效庫</a>
</div>
</body>
</html>

 

希望本文所述對大家的div+css網頁設計有所幫助。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved