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>
css實現鼠標懸停時滑出層提示相關文章：