鼠标经过弹出层纯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=gb2312" />
<title>鼠标经过弹出层纯CSS</title>
<style type="text/css">
.cc{
position:relative; /*这个是关键*/
z-index:2;
}
.cc:hover{
z-index:3;
background:none; /*没有这个在IE中不可用*/
}
.cc span{
display: none;
}
.cc:hover span{ /*span 标签仅在 :hover 状态时显示*/
display:block;
position:absolute;
top:10px;
left:145px;
width:15em;
padding: 3px;
color:black;
}
.dd{ background:#000000; color:#FFFFFF; padding:10px; display:block;}
</style>
</head>
<body><a class="cc" href="#">鼠标经过弹出层纯CSS
<span>
<div class="dd">里面想放什么就随意啦 设置位置只需在上面CSS上就可以了</div>
</span></a>
</body>
</html>
相关鼠标经过弹出层纯CSS