li eine Maus über das Ändern von Bildern (von Sprite-Bild)

Question

Ich möchte das Sprite-Bild ändern, Maus zu bewegen.

li, ein Tag hat keine spezielle Klasse. zu viele.

Ich möchte nur "_on" in bestehenden Klasse-i-Tags hinzufügen.

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 verwendet wird, die Art festgelegt, wenn Element schwebten wird.

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