li一個鼠標在變化的圖像（精靈圖像）

Question

我想更改精靈圖像懸停鼠標。

li，標籤沒有特殊的類。太多。

我想只在現有的class i標籤中添加「_on」。

HTML

<ul id="gnb"> 
<li class="frist mNavi01"><a href="/in01.asp"><i class="icon icon-mNavi01"></i></a> 
    <ul> 
     <li><a href="info/in01.asp"><i class="icon icon-mNavi01_01"></i></a></li> 
     <li><a href="info/in01_1.asp"><i class="icon icon-mNavi01_02"></i></a></li> 
     <li><a href="info/in01_2.asp"><i class="icon icon-mNavi01_03"></i></a></li> 
    </ul> 
</li> 

CSS

.icon-mNavi01_01 { //normal 
    background-image: url(../img/sprites/header_icons.png); 
    background-position: 0px -129px; 
    ... 
} 
.icon-mNavi01_01_on { //hover 
    background-image: url(../img/sprites/header_icons.png); 
    background-position: -148px -54px; 
    ... 
} 
.icon-mNavi01_02 { //normal 
    background-image: url(../img/sprites/header_icons.png); 
    background-position: 0px -296px; 
    ... 
} 
.icon-mNavi01_02_on { //hover 
    background-image: url(../img/sprites/header_icons.png); 
    background-position: -328px 0px; 
    ... 
} 
.icon-mNavi01_03 { //normal 
    background-image: url(../img/sprites/header_icons.png); 
    background-position: 0px -53px; 
    ... 
} 
.icon-mNavi01_03_on { //hover 
    background-image: url(../img/sprites/header_icons.png); 
    background-position: 0px -71px; 
    ... 
} 

Answer 1

:hover CSS用於當元件被盤旋設置樣式。

.icon-mNavi01_01:hover { //hover 
    background-image: url(../img/sprites/header_icons.png); 
    background-position: -148px -54px; 
    ... 
}