A list of effects is displayed, and a click effect is displayed !!!

JS effects move the mouse over the list and click to leave a mix.

 

CSS code:

. 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: le FT; <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 10 Px; <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 Code:

// Set the background color <br/> setclassbg = function (OBJ, classname) {<br/> obj. classname = classname; <br/>}</P> <p> // click it to change the background. <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/> 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/>}</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 code:

<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 =" SUCCESS '); "Title =" news "> <div> News </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 =" click '); "Title =" "> <div> billboard </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,8w.{onloadtab('mail_sj', '{', 'news_line', 'mail_cg.html '); "Title =" system "> <div> System </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,8w.{onloadtab('mail_sj', 'culture ', 'news_line', 'mail_del.html '); "Title =" culture "> <div> Culture </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,8w.javasonloadtab('mail_sj', 'News', 'news_line', 'mail_sj.html '); "Title =" news "> <div> News </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 =" click '); "Title =" "> <div> billboard </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,8w.{onloadtab('mail_sj', '{', 'news_line', 'mail_cg.html '); "Title =" system "> <div> System </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,8w.{onloadtab('mail_sj', 'culture ', 'news_line', 'mail_del.html '); "Title =" culture "> <div> Culture </div> <br/> </div>