列表划過效果，和點擊效果！！！

js效果的滑鼠划過列表並且點擊留下混跡。

 

css代碼：

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

js代碼：

//設定背景色<br />setclassbg = function(obj, classname) {<br /> obj.className = classname;<br />}</p><p>//點擊後更改背景<br />onclickbg = function(obj,counts) {<br /> var oid = obj.id;<br /> for (var i = 0; i < counts; i++) {<br /> if ("mail-div-left1" == "mail-div-left" + (i + 1)) {<br /> document.getElementById("mail-div-left" + (i + 1)).className = "mail-line-bg";<br /> document.getElementById("mail-div-left" + (i + 1)).onmouseout = function() { setclassbg(this, 'mail-line-bg'); };<br /> }<br /> else {<br /> document.getElementById("mail-div-left" + (i + 1)).className = "mail-line-bg1";<br /> document.getElementById("mail-div-left" + (i + 1)).onmouseout = function() { setclassbg(this, 'mail-line-bg1'); };<br /> }</p><p> if ("mail-div-left" + (i + 1) == "mail-div-left1") {<br /> if (oid == "mail-div-left" + (i + 1)) {<br /> document.getElementById("mail-div-left" + (i + 1)).onmouseover = function() { setclassbg(this, 'mail-line-bg mail-line-bgcolor'); };<br /> document.getElementById("mail-div-left" + (i + 1)).onmouseout = function() { setclassbg(this, 'mail-line-bg mail-line-bgcolor'); };<br /> }<br /> else {<br /> document.getElementById("mail-div-left" + (i + 1)).onmouseover = function() { setclassbg(this, 'mail-line-bg mail-line-bgcolor1'); };<br /> document.getElementById("mail-div-left" + (i + 1)).onmouseout = function() { setclassbg(this, 'mail-line-bg'); };<br /> }<br /> }<br /> else {<br /> if (oid == "mail-div-left" + (i + 1)) {<br /> document.getElementById("mail-div-left" + (i + 1)).onmouseover = function() { setclassbg(this, 'mail-line-bg1 mail-line-bgcolor'); };<br /> document.getElementById("mail-div-left" + (i + 1)).onmouseout = function() { setclassbg(this, 'mail-line-bg1 mail-line-bgcolor'); };<br /> }<br /> else {<br /> document.getElementById("mail-div-left" + (i + 1)).onmouseover = function() { setclassbg(this, 'mail-line-bg1 mail-line-bgcolor1'); };<br /> document.getElementById("mail-div-left" + (i + 1)).onmouseout = function() { setclassbg(this, 'mail-line-bg1'); };<br /> }<br /> }</p><p> }<br /> if (oid == "mail-div-left1")<br /> obj.className = "mail-line-bg mail-line-bgcolor";<br /> else<br /> obj.className = "mail-line-bg1 mail-line-bgcolor";</p><p>}

 

html代碼：

<div class="mail-l-bg"><br /> <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><br /> <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><br /> <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><br /> <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><br /> <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><br /> <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><br /> <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><br /> <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><br /> </div>