分享

鼠标感应显示隐藏图片和说明文字效果

 weiledream 2011-11-25
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www./1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<meta name="keywords" content="站长,网页特效,网页特效代码,js特效,js脚本,脚本,广告代码,zzjs,,www.,站长特效 网" />
<meta name="description" content="www.,站长特效网,站长必备js特效及广告代码。以质量为核心,以实用为目的,全力打造一流网页特效站" />
<title>站长特效 鼠标感应显示隐藏图片和说明文字效果 站长特效网</title>
<style type="text/css">
*{font-size:12px;padding:0;margin:0;}
img{border:0px;}
.nav_wwwzzjsnet{margin-left:200px;width:200px;}
.nav_wwwzzjsnet li{line-height:30px;height:30px;list-style:none;position:relative;text-align:center;background:#DCECF1;border-bottom:1px #CCCCCC solid;margin-bottom:2px;}
.nav_wwwzzjsnet li div{top:0;left:-160px;border:2px solid #0066CC;padding:2px;position:absolute;width:150px;}
.off div{display:none;}
.on div{display:block;}
</style>
</head>
<body>
<a href="http://www./">站长特效网</a>,以质量为核心,以实用为目的,打造一流网页特效站!,站长js特效。<hr>
<!--欢迎来到站长特效网,我们网站收集大量高质量js特效,提供许多广告代码下载,网址:www.zzjs@msn.com,用.net打造靓站-->
<div class="nav_wwwzzjsnet">
 <ul>
  <li onmousemove="this.className='on'" onmouseout="this.className='off'" class="off">
   <a href="#">站长特效一号</a>
   <div><a href="#"><img src="http://www./wp-content/themes/zzjs/images/logo.gif"><br>站长特效一号说明1</a></div>
  </li>
  <li onmousemove="this.className='on'" onmouseout="this.className='off'" class="off">
   <a href="#">站长特效二号</a>
   <div><a href="#"><img src="http://www./wp-content/themes/zzjs/images/logo.gif"><br>站长特效二号说明2</a></div>
  </li>
  <li onmousemove="this.className='on'" onmouseout="this.className='off'" class="off">
   <a href="#">站长特效三号</a>
   <div><a href="#"><img src="http://www./wp-content/themes/zzjs/images/logo.gif"><br>站长特效三号说明3</a></div>
  </li>
  <li onmousemove="this.className='on'" onmouseout="this.className='off'" class="off">
   <a href="#">站长特效四号</a>
   <div><a href="#"><img src="http://www./wp-content/themes/zzjs/images/logo.gif"><br>站长特效四号说明4</a></div>
  </li>
 </ul>
</div>
</body>
</html>

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多