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;
    ...
}

li（鼠标改变图像）（精灵图像）

1 个答案: