我在為li添加hover效果時,為li添加了transition屬性,CSS代碼如下
<pre>
.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;
}
</pre>
這種樣式導致了一個如下圖的問題
問題發(fā)生的原因是在設置背景色的時候使用了簡寫,導致hover中背景圖的定位被默認為了0;而transition屬性設置時間后是在一段時間內(nèi)慢慢將樣式變?yōu)轭A先設定的樣式,背景圖的定位實際是由0 0慢慢變?yōu)榱?1px -32px;所以會出現(xiàn)圖片移入的效果;
這個問題的解決辦法只要將background: white改為background-color: white即可;
