transition属性作用时背景图片发生移入效果的问题

我在为li添加hover效果时,为li添加了transition属性,CSS代码如下

 .left-bar-list li{
 padding-left: 20px;
 margin: 5px 0;
 background: url(../img/index_bg.png) no-repeat 11px -32px;
 height: 32px;
 line-height: 32px;
 transition: all 0.3s;
 }
 .left-bar-list li:hover{
 background: white;
 border-left: 1px solid #03a093;
 text-indent: 5px;
 }
 

这种样式导致了一个如下图的问题

问题发生的原因是在设置背景色的时候使用了简写,导致hover中背景图的定位被默认为了0;而transition属性设置时间后是在一段时间内慢慢将样式变为预先设定的样式,背景图的定位实际是由0 0慢慢变为了11px -32px;所以会出现图片移入的效果;

这个问题的解决办法只要将background: white改为background-color: white即可;