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实现鼠标悬停时滑出层提示相关文章：