Css中移动鼠标层的转换
新建一个MousMoveUpShow.aspx页面
代码为:
<!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 runat="server">
<title>鼠标移上去显示层</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-CN" />
<meta content="all" name="robots" />
<meta name="author" content="Netease" />
<meta name="Copyright" content="Netease" />
<meta name="keywords" content="" />
<base target="_blank" />
<style>
*{margin:0px;padding:0px;}
body { text-align:left; font-size:12px;}
ul.onMShow {width: 110px;}
ul.onMShow li {list-style:none; background-position:left top; background-repeat:no-repeat;}
ul.onMShow li a {position: relative;display:block; width:200px; height:50px;border:none; }
ul.onMShow li a div {display: none;}
ul.onMShow li a:hover {background::none;display:block; width:auto;}/*此处需定义宽度，否则IE6下无法正常显示*/
ul.onMShow li a:hover div{display:block;position: absolute;padding:5px;width: 272px;left:0px;top: 0px;border: 1px solid #BDBDBD;background-color: #E4F6FF;cursor:pointer;}
ul.onMShow li a img {width:80px;height:80px;border:none;display:block;position: absolute;top:5px;left:5px;}
ul.onMShow li dl {width:180px;float:right;color: #000;line-height:20px;}
ul.onMShow li dl dd span {font-weight: bold;color: #000; margin-right:5px;}
ul.onMShow li dl dd h5 { font-size:12px; color:#979797; display:inline; font-weight:normal;}
</style>
</head>
<body>
<ul class="onMShow">
<li style="background-image:url(Img/sq.jpg)">
<a href="http://money.163.com/09/0703/18/5DALA0IV002526O5.html"><br />
<div>
<img src="Img/c.jpg" alt="点击有超链接" />
<dl>
<dd><span>aimee</span></dd>
<dd>鼠标移动换层</dd>
</dl>
</div>
</li>
</ul>
</body>
</html>
结果为：先显示sq.jpg图片，当鼠标移动上去时，换成显示c.jpg以及文字层
