很多时候需要用到这个css效果,实际上就用了一个li标签的热点样式,不仅是li标签,div等也可以的
完整代码如下,
<!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上去运行看看