<title>使用className改变样式</title> <style type="text/css"> li{ font-size: 12px; color: #ffffff; background-image: url(images/bg1.gif); background-repeat: no-repeat; text-align: center; height: 33px; 104px; line-height:38px; float:left; list-style:none; } .out{ background-image: url(images/bg1.gif); } .over{ background-image: url(images/bg2.gif); color:#ffff00; font-weight:bold; cursor:hand; } </style> </head> <body> <ul> <li onmouseover="this.className='over'" onmouseout="this.className='out'">资讯动态</li> <li onmouseover="this.className='over'" onmouseout="this.className='out'">产品世界</li> <li onmouseover="this.className='over'" onmouseout="this.className='out'">市场营销</li> </ul> </body>