很多时候需要用到这个css效果,实际上就用了一个li标签的热点样式,不仅是li标签,div等也可以的

css鼠标改变背景色

完整代码如下,

<!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=gb2312" />          
<title>div/css鼠标热点改变li标签背景颜色</title>          
<style type="text/css">          
body{ background-color:#CCCC99; margin:0; padding:0; color:#fff;}          
ul{ margin:0; padding:50px;}          
li{ list-style:none; height:24px; background-color:#CC3399; width:150px; margin-bottom:5px; line-height:24px; padding-left:4px; font-size:14px;}          
li:hover{ background-color:#99CC00; color:#CC3399; cursor:pointer;}/*cursor:pointer:设定鼠标样式*/          
</style>          
</head>          
                     
<body>          
    <ul>          
        <li>1111</li>          
        <li>2222</li>          
        <li>3333</li>          
        <li>4444</li>          
    </ul>          
</body>          
</html>

 大家也可以到http://luyugao.com/tools/run-html.htm上去运行看看