html - 带有 css sprite 图像的锚标记在活动时未更改

Question

我有一个图标附加到悬停时的锚标签上，我可以更改图像，但单击图像时 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>

而且我在两个不同的 div 中有这段代码，所以一个锚标记上的活动状态不应该改变另一个。有任何想法吗？

Answer 1

:hover和具有相同的背景位置:active。

改变它，它应该工作。

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

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

更改文本颜色使用

    .ctrls:active{
        color:green;
    }

这是小提琴。

:visited而:link款式只能因颜色而异。 阅读本文了解更多信息