<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> *{ margin:0px; padding:0px;} #kuang{ width:100%; height:400px; border:1px solid black; position:relative;} #choose{ width:30%; height:400px; background-color:#0C6; position:relative; float:left; text-align:center;} #picture{ width:60%; height:400px; background-color:#9C0; position:relative; float:right;} #choose ul li{ background-color: silver; list-style-type: none;} #pic2,#pic3{ display:none;} </style> </head> <body> <div id="kuang"> <div id="choose"> <ul> <li onmouseover="change('pic1',this)" onmouseout="change2(this)">AAA</li> <li onmouseover="change('pic2',this)" onmouseout="change2(this)">BBB</li> <li onmouseover="change('pic3',this)" onmouseout="change2(this)">CCC</li> </ul> </div> <div id="picture"> <div id="pic1">aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div> <div id="pic2">bbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div> <div id="pic3">ccccccccccccccccccccccccccccc</div> </div> </div> </body> </html> <script type="text/javascript"> function change(val,obj){ obj.style.backgroundColor="#FFC12D"; if(val=='pic1'){ pic1.style.display='block'; pic2.style.display='none'; pic3.style.display='none'; }else if(val=='pic2'){ pic1.style.display='none'; pic2.style.display='block'; pic3.style.display='none'; }else if(val=='pic3'){ pic1.style.display='none'; pic2.style.display='none'; pic3.style.display='block'; } } function change2(val){ val.style.backgroundColor="silver"; } </script>