js+css样式表实现鼠标移动变换显示内容效果

实现的JS代码 :

function  showlayer(id,index)
... {
eval("document.getElementById('clayer"+id+"').className='conpqhbg'");
eval("document.getElementById('clayer"+index+"').className='conpdqbg'");
eval("document.getElementById('clay"+id+"').style.display='none'");
eval("document.getElementById('clay"+index+"').style.display='block'");
}

function  showlayer2(id,index,other)
... {
eval("document.getElementById('clayer3_"+id+"').className='conphdqbg'");
eval("document.getElementById('clayer3_"+index+"').className='conphycbg'");
eval("document.getElementById('clayer3_"+other+"').className='conphycbg'");
eval("document.getElementById('clay3_"+id+"').style.display='block'");
eval("document.getElementById('clay3_"+index+"').style.display='none'");
eval("document.getElementById('clay3_"+other+"').style.display='none'");
}

function  qlsh(id)
... {
eval("document.getElementById('qldqmenu"+id+"').className='qb'");
eval("document.getElementById('qldq"+id+"').style.visibility='visible'");
}
function  qlhs(id)
... {
eval("document.getElementById('qldqmenu"+id+"').className='qa'");
eval("document.getElementById('qldq"+id+"').style.visibility='hidden'");
}

实现的ccs代码:

 

/**/ /* share */
body  {...} {padding:0px;font-size:12px;text-align:center;font-family:"宋体","Arial";margin:0;}
img  {...} {border:0px; padding:0px; margin:0px;}
form  {...} {border:0px; padding:0px; margin:0px;}
div  {...} {border:0px; padding:0px; margin:0px;}
ul  {...} {border:0px; padding:0px; margin:0px;}
li  {...} {border:0px; padding:0px; margin:0px;}
dl  {...} {border:0px; padding:0px; margin:0px;}
dt  {...} {border:0px; padding:0px; margin:0px;}
dd  {...} {border:0px; padding:0px; margin:0px;}
input {...} { padding:0px; margin:0px;}
.clear  {...} {clear:both;line-height:0;}
h1  {...} {font-size:20px;font-weight:bold;font-family:"宋体";text-align:center;margin:0;padding:0;}
.right  {...} {float:right;width:640px;text-align:right;font-size: 14px;margin-top:4px;}
textarea  {...} {margin:0;padding:0;background:#FFFFCC;}

/**/ /*内容块*/
#conbox  {...} {width:983px;margin:auto;background:url(titlebg15.gif);}
#conright  {...} {width:300px;float:right;}
#conleft  {...} {width:653px;float:left;border-top:#8991B1 1px solid;padding:20px 10px;overflow:hidden;}
#contitle  {...} {width:620px;font-size:20px;font-weight:bold;font-family:"宋体";text-align:center;}
#conauthor  {...} {width:620px;text-align:center;margin:16px 0;}
#conauthor span  {...} {margin-right:12px;}
#conauthor span a:link,#conauthor span a:visited {...} {text-decoration:none;color:#204890;}
#conauthor span a:active,#conauthor span a:hover {...} {text-decoration:underline;color:#F00;}
#condigest  {...} {background:#F2F2F9;width:622px;text-align:left;margin:22px 0 8px 0;padding:12px;color:#666666;line-height:22px;}
#conneirong  {...} {width:640px;text-align:left;font-size:10.5pt;line-height:24px;margin:auto;padding-left:4px;}
#conneirong img  {...} {border:1px;}
#conlink  {...} {width:647px;margin:8px 0;text-align:right;padding-right:6px;}
#conlink a:link,#conlink a:visited {...} {text-decoration:none;color:#204890;font-size:12px;}
#conlink a:active,#conlink a:hover {...} {text-decoration:underline;color:#F00;font-size:12px;}
#conbottom  {...} {width:983px;margin:auto;height:10px;background:url(titlebg16.gif) no-repeat;}

/**/ /*产品块*/
.conpdbox  {...} {width:300px;}
.conxgpro  {...} {width:296px;margin:8px 0;clear:both;}
.conxgpro img  {...} {float:left;margin:0 16px;width:60px;height:60px;}
.conxgpro p  {...} {float:left;line-height:22px;text-align:left;margin-top:6px;width:185px;white-space:nowrap;overflow:hidden;}
.conxgpro p span  {...} {font-weight:bold;}
.conpdqbg  {...} {width:135px;float:left;border-right:#8E96B4 1px solid;border-left:#8E96B4 1px solid;border-top:#8E96B4 1px solid;height:28px;font-weight:bold;text-align:left;padding-left:12px;line-height:28px;cursor:pointer;}

.conpqhbg  {...} {width:134px;float:left;border-right:#8E96B4 1px solid;border-left:#8E96B4 1px solid;border-top:#8E96B4 1px solid;height:28px;text-align:left;padding-left:12px;line-height:28px;background:url(titlebg18.gif) repeat;cursor:pointer;}
.conmibg  {...} {width:3px;float:left;height:28px;border-bottom:#8E96B4 1px solid;}
.conrpbox  {...} {border-bottom:#8E96B4 1px solid;width:298px;margin-bottom:10px;border-right:#8E96B4 1px solid;border-left:#8E96B4 1px solid;}


/**/ /*排行*/
.conphdqbg  {...} {width:86px;float:left;border-right:#8E96B4 1px solid;border-left:#8E96B4 1px solid;border-top:#8E96B4 1px solid;height:28px;font-weight:bold;text-align:left;padding-left:12px;line-height:28px;cursor:pointer;background:#FAFAFD}
.conphycbg  {...} {width:83px;float:left;border-right:#8E96B4 1px solid;border-left:#8E96B4 1px solid;border-top:#8E96B4 1px solid;height:28px;text-align:left;padding-left:12px;line-height:28px;background:url(titlebg18.gif) repeat;cursor:pointer;}
.conrphbox  {...} {border-bottom:#8E96B4 1px solid;width:298px;margin-bottom:10px;border-right:#8E96B4 1px solid;border-left:#8E96B4 1px solid;background:#FAFAFD}
.conrrphbox  {...} {width:276px;padding:8px 0 8px 8px;overflow:hidden;float:left;}
.conrrphbox ul  {...} {width:276px;list-style-type:none;margin:8px 0;}
.conrrphbox li  {...} {width:292px;float:left;overflow:hidden;white-space:nowrap;text-overflow: ellipsis;text-align:left;padding-left:8px;color:#204890;list-style-type:none;background:url(titlebg14.gif) no-repeat 0 30%;}
.conrrphbox a:link,.conrrphbox a:visited {...} {text-decoration:none;color:#204890;font-size:12px;line-height:22px;}
.conrrphbox a:active,.conrrphbox a:hover {...} {text-decoration:underline;color:#F00;font-size:12px;line-height:22px;}

实现效果代码HTML:

 

<! 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"  lang ="zh-CN" >
< head >
< title > 效果实现标准 </ title >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=gb2312"   />
< meta  http-equiv ="Content-Language"  content ="zh-CN"   />
< link  rel ="stylesheet"  href ="y_mobile_content.css"  type ="text/css"  media ="all"   />
< script  src ="showlay.js" ></ script >
< base  target ="_blank" >
</ head >

< body >
< div  class ="clear" ></ div >
<!-- 排行榜 -->
< div  id ="__008" >
< div  class ="conpdbox" >< div >< div  id ="clayer3_1"  onmouseover ="showlayer2(1,2,3)"  class ="conphdqbg" > 文章阅读排行 </ div >< div  class ="conmibg" ></ div >< div  id ="clayer3_2"  onmouseover ="showlayer2(2,1,3)"  class ="conphycbg" > 周排行 </ div >< div  class ="conmibg" ></ div >< div  id ="clayer3_3"  onmouseover ="showlayer2(3,1,2)"  class ="conphycbg" > 月排行 </ div ></ div >< div  class ="clear" ></ div >
< div  class ="conrphbox" >
<!-- 日排行 -->
< div  class ="conrrphbox"  id ="clay3_1" >
< ul >
< li >< a  href ="http://design.yesky.com/show/24/3096024.shtml" > 创意装置设计欣赏：刀叉的艺术 </ a ></ li >< li >< a  href ="http://tools.yesky.com/204/3095704.shtml" > 轻松利用快车进行远程控制及异地下载 </ a ></ li >< li >< a  href ="http://os.yesky.com/windowsvista/226/3095726.shtml" > Windows Vista操作系统难圆微软垄断梦 </ a ></ li >< li >< a  href ="http://soft.yesky.com/securityw/aqcp/254/3095754.shtml" > 精心设置卡巴斯基 加快我们的杀毒速度 </ a ></ li >< li >< a  href ="http://design.yesky.com/16/3096016.shtml" > 王孟友谈标志(Logo)设计的方法和技巧 </ a ></ li >< li >< a  href ="http://homepage.yesky.com/356/3095356.shtml" > SEO研究：一个月进搜索引擎排名前十 </ a ></ li >< li >< a  href ="http://soft.yesky.com/security/271/3095771.shtml" > 如何有效测试无线路由器的安全功能 </ a ></ li >< li >< a  href ="http://os.yesky.com/lin/196/3095696.shtml" > 制作在软盘上跑的Linux引导器详细过程 </ a ></ li >< li >< a  href ="http://design.yesky.com/artist/36/3091536.shtml" > CorelDraw文字转曲线为什么会错位？ </ a ></ li >< li >< a  href ="http://homepage.yesky.com/363/3095363.shtml" > 网络创业：再谈网络赚钱的一些主要模式 </ a ></ li >
</ ul >
</ div >
<!-- 周排行 -->
< div  class ="clear" ></ div >
< div  class ="conrrphbox"  id ="clay3_2"  style ="display:none;" >
< ul >
< li >< a  href ="http://os.yesky.com/windowsvista/173/3088173.shtml" > 22张高清晰Windows Vista操作系统壁纸 </ a ></ li >< li >< a  href ="http://os.yesky.com/windowsvista/353/3093853.shtml" > 是谁破窗而入 免费激活Vista全程揭秘 </ a ></ li >< li >< a  href ="http://soft.yesky.com/lianluo/134/3086634.shtml" > 只剩四天 抓紧时间学抢免费QQ秀啦！ </ a ></ li >< li >< a  href ="http://os.yesky.com/windowsvista/248/3090748.shtml" > Windows Vista试用过期“惨状”图集 </ a ></ li >< li >< a  href ="http://design.yesky.com/photoshop/434/3088934.shtml" > Photoshop表现光线特效的秘密 </ a ></ li >< li >< a  href ="http://design.yesky.com/photoshop/390/3089890.shtml" > Photoshop滤镜巧妙绘制火流星 </ a ></ li >< li >< a  href ="http://design.yesky.com/photoshop/319/3087319.shtml" > Photoshop修正曝光失败的照片 </ a ></ li >< li >< a  href ="http://soft.yesky.com/lesson/464/3087964.shtml" > Windows Vista边栏实用小插件大巡礼 </ a ></ li >< li >< a  href ="http://design.yesky.com/lesson/269/3089769.shtml" > 色彩的旋律 设计配色原理及实用色谱 </ a ></ li >< li >< a  href ="http://soft.yesky.com/lianluo/493/3086493.shtml" > 中国移动飞信发功 手机、电脑无缝互通 </ a ></ li >
</ ul >
</ div >
<!-- 月排行 -->
< div  class ="clear" ></ div >
< div  class ="conrrphbox"  id ="clay3_3"  style ="display:none;" >
< ul >
< li >< a  href ="http://soft.yesky.com/lianluo/294/2517294.shtml" > QQ密码找回指南新编 带你快速找回QQ密码 </ a ></ li >< li >< a  href ="http://design.yesky.com/photoshop/234/3072734.shtml" > Photoshop处理特效：照片中间套照片 </ a ></ li >< li >< a  href ="http://os.yesky.com/windowsvista/173/3088173.shtml" > 22张高清晰Windows Vista操作系统壁纸 </ a ></ li >< li >< a  href ="http://design.yesky.com/lesson/444/2593444.shtml" > 留住美好时光 节日照片处理实例集粹 </ a ></ li >< li >< a  href ="http://design.yesky.com/photoshop/488/3076488.shtml" > Photoshop打造梦幻泡泡情人照 </ a ></ li >< li >< a  href ="http://soft.yesky.com/lesson/423/3041923.shtml" > Windows Vista操作系统应用技巧集锦 </ a ></ li >< li >< a  href ="http://soft.yesky.com/lianluo/494/3079994.shtml" > 非QQ会员也能随时随地更换自定义头像 </ a ></ li >< li >< a  href ="http://design.yesky.com/photoshop/32/3068532.shtml" > Photoshop打造甜蜜节日水果糖 </ a ></ li >< li >< a  href ="http://os.yesky.com/windowsvista/353/3093853.shtml" > 是谁破窗而入 免费激活Vista全程揭秘 </ a ></ li >< li >< a  href ="http://design.yesky.com/photoshop/423/3076423.shtml" > Photoshop制作甜蜜情侣照片书签 </ a ></ li >
</ ul >
</ div >
< div  class ="clear" ></ div >
</ div >
</ div >
</ div >
<!-- 排行榜结束 -->
</ body >
</ html >

插入的图片:   http://dev.yesky.com//TLimages/newmobile/titlebg18.gif