<style type="text/css"> *{ margin:0px auto; padding:0px} #wai{ 150px; height:300px;} .list{ 150px; height:40px; background-color:#66F; text-align:center; line-height:40px; vertical-align:middle; color:white; border:1px solid white;} .list:hover{ cursor:pointer; background-color:#F33} </style> </head> <body> <br /> <div id="wai"> <div class="list" onclick="xuan(this)" onmouseover="bian(this)" onmouseout="huifu()">张三</div> <div class="list" onclick="xuan(this)" onmouseover="bian(this)" onmouseout="huifu()">李四</div> <div class="list" onclick="xuan(this)" onmouseover="bian(this)" onmouseout="huifu()">王五</div> </div> </body> <script type="text/javascript"> function xuan(d) { //清 var list = document.getElementsByClassName("list"); for(var i=0;i<list.length;i++) { list[i].removeAttribute("bs"); list[i].style.backgroundColor = "#66F"; } //选 d.setAttribute("bs",1); d.style.backgroundColor = "#F33"; } function bian(d) { //清 var list = document.getElementsByClassName("list"); for(var i=0;i<list.length;i++) { if(list[i].getAttribute("bs")!="1") { list[i].style.backgroundColor = "#66F"; } } //选 d.style.backgroundColor = "#F33"; } function huifu() { var list = document.getElementsByClassName("list"); for(var i=0;i<list.length;i++) { if(list[i].getAttribute("bs")!="1") { list[i].style.backgroundColor = "#66F"; } } } </script>