列表划过效果，和点击效果！！！

js效果的鼠标划过列表并且点击留下混迹。

 

css代码：

.mail-l-bg { float:left; background:url(../images/mail-l-bg.gif)!important; width:170px; height:371px; margin:6px 4px; display:inline } .c{ clear:both} .mail-line-bg { float:left; width:158px; height:22px; margin:10px 0px 3px 6px; color:#333; cursor:hand; display:inline } .mail-line-bgcolor { background-color:#72a6e0; } .mail-line-bg img { float:left; margin:4px 10px; display:inline } .mail-line-bg div { float:left; margin:5px 4px !important margin:4px 4px; display:inline } .mail-line-bg font { float:left; margin:3px 2px !important margin:2px 2px; font-size:12px; font-weight:bold } .mail-line-bg1 { float:left; width:158px; height:22px; margin-bottom:3px; margin-left:6px; color:#333; cursor:hand; display:inline } .mail-line-bgcolor1 { background-color:#dfe8f1; } .mail-line-bg1 img { float:left; margin:4px 10px; display:inline } .mail-line-bg1 div { float:left; margin:5px 4px !important margin:4px 4px; display:inline } .mail-line-bg1 font { float:left; margin:3px 2px !important margin:2px 2px; font-size:12px; font-weight:bold } .m-xian { margin-left:auto; margin-right:auto; background-color:#d7dee4; width:90%; height:1px; } .hh8 { float:left; height:8px; width:100%; } .bg_bule { float:left; width:100%; background-color:#c7d4e5; margin-bottom:-9999px; padding-bottom:9999px; }

js代码：

//设置背景色 setclassbg = function(obj, classname) { obj.className = classname; } //点击后更改背景 onclickbg = function(obj,counts) { var oid = obj.id; for (var i = 0; i < counts; i++) { if ("mail-div-left1" == "mail-div-left" + (i + 1)) { document.getElementById("mail-div-left" + (i + 1)).className = "mail-line-bg"; document.getElementById("mail-div-left" + (i + 1)).onmouseout = function() { setclassbg(this, 'mail-line-bg'); }; } else { document.getElementById("mail-div-left" + (i + 1)).className = "mail-line-bg1"; document.getElementById("mail-div-left" + (i + 1)).onmouseout = function() { setclassbg(this, 'mail-line-bg1'); }; } if ("mail-div-left" + (i + 1) == "mail-div-left1") { if (oid == "mail-div-left" + (i + 1)) { document.getElementById("mail-div-left" + (i + 1)).onmouseover = function() { setclassbg(this, 'mail-line-bg mail-line-bgcolor'); }; document.getElementById("mail-div-left" + (i + 1)).onmouseout = function() { setclassbg(this, 'mail-line-bg mail-line-bgcolor'); }; } else { document.getElementById("mail-div-left" + (i + 1)).onmouseover = function() { setclassbg(this, 'mail-line-bg mail-line-bgcolor1'); }; document.getElementById("mail-div-left" + (i + 1)).onmouseout = function() { setclassbg(this, 'mail-line-bg'); }; } } else { if (oid == "mail-div-left" + (i + 1)) { document.getElementById("mail-div-left" + (i + 1)).onmouseover = function() { setclassbg(this, 'mail-line-bg1 mail-line-bgcolor'); }; document.getElementById("mail-div-left" + (i + 1)).onmouseout = function() { setclassbg(this, 'mail-line-bg1 mail-line-bgcolor'); }; } else { document.getElementById("mail-div-left" + (i + 1)).onmouseover = function() { setclassbg(this, 'mail-line-bg1 mail-line-bgcolor1'); }; document.getElementById("mail-div-left" + (i + 1)).onmouseout = function() { setclassbg(this, 'mail-line-bg1'); }; } } } if (oid == "mail-div-left1") obj.className = "mail-line-bg mail-line-bgcolor"; else obj.className = "mail-line-bg1 mail-line-bgcolor"; }

 

html代码：

<div class="mail-l-bg"> <div class="mail-line-bg" id="mail-div-left1" onmouseover="setclassbg(this,'mail-line-bg mail-line-bgcolor1')" onmouseout="setclassbg(this,'mail-line-bg')" onclick="onclickbg(this,8);onloadtab('mail_sj','新闻','news_line','mail_sj.html');" title="新闻"><img src="../images/icons/LedIcon_072.png" /><div>新闻</div></div> <div class="mail-line-bg1" id="mail-div-left2" onmouseover="setclassbg(this,'mail-line-bg1 mail-line-bgcolor1')" onmouseout="setclassbg(this,'mail-line-bg1')" onclick="onclickbg(this,8);onloadtab('mail_sj','风云榜','news_line','mail_send.html');" title="风云榜"><img src="../images/icons/LedIcon_072.png" /><div>风云榜</div></div> <div class="mail-line-bg1" id="mail-div-left3" onmouseover="setclassbg(this,'mail-line-bg1 mail-line-bgcolor1')" onmouseout="setclassbg(this,'mail-line-bg1')" onclick="onclickbg(this,8);onloadtab('mail_sj','制度','news_line','mail_cg.html');" title="制度"><img src="../images/icons/LedIcon_072.png" /><div>制度</div></div> <div class="mail-line-bg1" id="mail-div-left4" onmouseover="setclassbg(this,'mail-line-bg1 mail-line-bgcolor1')" onmouseout="setclassbg(this,'mail-line-bg1')" onclick="onclickbg(this,8);onloadtab('mail_sj','文化','news_line','mail_del.html');" title="文化"><img src="../images/icons/LedIcon_072.png" /><div>文化</div></div> <div class="mail-line-bg1" id="mail-div-left5" onmouseover="setclassbg(this,'mail-line-bg1 mail-line-bgcolor1')" onmouseout="setclassbg(this,'mail-line-bg1')" onclick="onclickbg(this,8);onloadtab('mail_sj','新闻','news_line','mail_sj.html');" title="新闻"><img src="../images/icons/LedIcon_072.png" /><div>新闻</div></div> <div class="mail-line-bg1" id="mail-div-left6" onmouseover="setclassbg(this,'mail-line-bg1 mail-line-bgcolor1')" onmouseout="setclassbg(this,'mail-line-bg1')" onclick="onclickbg(this,8);onloadtab('mail_sj','风云榜','news_line','mail_send.html');" title="风云榜"><img src="../images/icons/LedIcon_072.png" /><div>风云榜</div></div> <div class="mail-line-bg1" id="mail-div-left7" onmouseover="setclassbg(this,'mail-line-bg1 mail-line-bgcolor1')" onmouseout="setclassbg(this,'mail-line-bg1')" onclick="onclickbg(this,8);onloadtab('mail_sj','制度','news_line','mail_cg.html');" title="制度"><img src="../images/icons/LedIcon_072.png" /><div>制度</div></div> <div class="mail-line-bg1" id="mail-div-left8" onmouseover="setclassbg(this,'mail-line-bg1 mail-line-bgcolor1')" onmouseout="setclassbg(this,'mail-line-bg1')" onclick="onclickbg(this,8);onloadtab('mail_sj','文化','news_line','mail_del.html');" title="文化"><img src="../images/icons/LedIcon_072.png" /><div>文化</div></div> </div>