sosori sosori - 4 months ago 10
CSS Question

li a mouse-over changing images (of sprite image)

I want to change the sprite image hover mouse.

li, a tag does not have a special class. too many.

I would like to add only "_on" in existing class i tags.

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

:hover css is used to set style when element is hovered .

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