萬盛學電腦網 >> 網頁制作 >> DivCSS教程 >> 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網頁設計有所幫助。
DivCSS教程排行
程序編程推薦
相關文章
copyright © 萬盛學電腦網 all rights reserved