鼠标悬浮时发生的效果改变

1，鼠标悬浮时发生简单的字体或背景颜色的改变

没有悬浮的样式

.project .left2 li a{background: url("image/cgal_tb1.jpg") no-repeat 30px center;display: block;padding-left:50px;line-height:45px;font-size:14px;color:#666;}

当鼠标悬浮时效果成：

A用纯HTML写：

.project .left2 li a:hover{background:#FFBF4B url("image/cgal_tb2.jpg") no-repeat 30px center;color:#fff;text-decoration:none;}

B用纯js写

.project .left2 li a.on{background:#FFBF4B url("image/cgal_tb2.jpg") no-repeat 30px center;color:#fff;text-decoration:none;}

C混合写法html和js(注意on后面的逗号，表示或者的意思它的后面跟的内容悬浮改变的状态)

.project .left2 li a.on,

.project .left2 li a:hover{background:#FFBF4B url("image/cgal_tb2.jpg") no-repeat 30px center;color:#fff;text-decoration:none;}

2鼠标悬浮时发生图片却换效果