css實現鼠標懸停時滑出層提示的方法

2024-07-11 09:00:41

字體：大中小

來源：轉載

供稿：網友

本文實例講述了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網頁設計有所幫助。

上一篇：css語法大全

下一篇：表單中Readonly和Disabled的區別詳解