用js实现鼠标放上内容背景+颜色改变？

我是个新手，自己只能写到这里了。怎么实现鼠标放上哪个li就背景和字体颜色都换了呢？我这个只有第一行可以。下面的行就不行了。大家帮帮忙，谢谢了。
<!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>
#showspace{width:auto;height:auto;padding:1px;position:absolute;border:1px solid #ccc;background:#F5FFDF;margin-left:70px; }
#showspace ul{list-style-type:none;}
#showspace ul li{height:20px; padding-left:10px; line-height:20px; cursor:pointer;} 
#showspace ul li:hover{ background:#8fc400;}
#showspace ul li label{float:left; display:inline; font-weight:bold;}
</style>
</head>
<body> <div id="showspace">
                 <ul>
                      <li onmouseover="airport()" onmouseout="airporthover()"><label id="thecity">鼠标放到哪行，哪行字就变成白色，背景为绿色 </label></li>
                      <li onmouseover="airport()" onmouseout="airporthover()"><label id="thecity">鼠标放到哪行，哪行字就变成白色，背景为绿色 </label></li>
                      <li onmouseover="airport()" onmouseout="airporthover()"><label id="thecity">鼠标放到哪行，哪行字就变成白色，背景为绿色</label></li>
                      <li onmouseover="airport()" onmouseout="airporthover()"><label id="thecity">鼠标放到哪行，哪行字就变成白色，背景为绿色 </label></li>
                 </ul>
        </div>

<script type="text/jscript">
function airport(c){
document.getElementById("thecity").style.color="#ffffff";
  document.getElementById("theairport").style.color="#ffffff";
document.getElementById("thecontory").style.color="#ffffff";

}
function airporthover(c){
document.getElementById("thecity").style.color="#666666";
document.getElementById("theairport").style.color="#666666";
document.getElementById("thecontory").style.color="#999999";

}
</script>
         
</body>
</html>

解决方案 »

  1.   


    <!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=GBK" />
    <title>!</title>
    <style>
    #showspace{width:auto;height:auto;padding:1px;position:absolute;border:1px solid #ccc;background:#F5FFDF;margin-left:70px; }
    #showspace ul{list-style-type:none;}
    #showspace ul li{height:20px; padding-left:10px; line-height:20px; cursor:pointer;} 
    #showspace ul li:hover{ background:#8fc400;}
    #showspace ul li label{float:left; display:inline; font-weight:bold;}
    </style>
    </head>
    <body>    <div id="showspace">
                     <ul>
                          <li onmouseover="airport(this)" onmouseout="airporthover(this)"><label id="thecity">鼠标放到哪行，哪行字就变成白色，背景为绿色 </label></li>
                          <li onmouseover="airport(this)" onmouseout="airporthover(this)"><label id="thecity">鼠标放到哪行，哪行字就变成白色，背景为绿色 </label></li>
                          <li onmouseover="airport(this)" onmouseout="airporthover(this)"><label id="thecity">鼠标放到哪行，哪行字就变成白色，背景为绿色 </label></li>
                          <li onmouseover="airport(this)" onmouseout="airporthover(this)"><label id="thecity">鼠标放到哪行，哪行字就变成白色，背景为绿色 </label></li>
                     </ul>
            </div>
        
    <script type="text/jscript">
    function airport(c){
        c.style.color="#ffffff";    
    }
    function airporthover(c){
        c.style.color="#666666";
        
    }
    </script>
             
    </body>
    </html>