0

ホバー時にアンカータグにアイコンが添付されているため、画像を変更できますが、画像をクリックすると a:active が適用されません。この問題は、テキストではなく画像をクリックした場合にのみ発生します。

CSS

.ctrls {
        font-family: Arial;
        font-size: 12px;
        color: #000000;
        text-decoration: none;
    }

.ctrls:hover {
    text-decoration: none;
}

.ctrls .icon {
    display: inline-block;
    background-image: url(http://jstiles.com/temp/1360875952/ctrls/css-sprite.png);
    background-repeat: no-repeat;
    width: 16px;
    height: 16px;
    background-position: 0px -144px;
}

.ctrls:hover .icon {
    background-position: 0px -252px;
}

.ctrls:active .icon {
    background-position: 0px -252px;
}

html

  <span> 
        <a href="#" class="ctrls" id="signal1"> <span class="icon"></span>Signal1</a>
        <a href="#" class="ctrls" id="signal2"> <span class="icon"></span>Signal2</a>
        <a href="#" class="ctrls" id="signal3"> <span class="icon"></span>Signal3</a>
    </span>

また、このコードは2つの異なるdivにあるため、1つのアンカータグのアクティブ状態が別のアンカータグを変更することはありません。何か案は？

4

1 に答える 1

0

you have same background position for :hover and :active.

change it and it should work.

.ctrls:hover .icon {
    background-position: 0px -252px;
}

.ctrls:active .icon {
    background-position: 0px 0px; //change position
}

To change text-color use 

    .ctrls:active{
        color:green;
    }

Here is the fiddle.

:visited and :link styles can only differ by color. Read this for more information

于 2013-10-21T09:01:32.257 に答える