Привязка тега с изображением спрайта css не меняется на активный

0

У меня есть значок, прикрепленный к тегу привязки при наведении, который я мог бы изменить изображение, но при нажатии на изображение активен неактивный. Эта проблема возникает только при нажатии на изображение не с текстом.

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, поэтому активное состояние на одном теге привязки не должно меняться другим. Есть идеи?

Теги:
anchor
css-sprites

1 ответ

0

у вас одинаковое положение фона для :hover и :active.

измените его, и он должен работать.

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

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

Чтобы изменить использование текстового цвета

    .ctrls:active{
        color:green;
    }

Вот скрипка.

:visited и :link стили :link могут отличаться только цветом. Читайте это для получения дополнительной информации

Поделиться
  • 0
    он работает правильно при нажатии на текст, проблема только при нажатии на изображение
  • 0
    это также работает над наведением изображения
Показать ещё 5 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню