CSS - спрайт изображения: активный не работает, т.е. - PullRequest
Новая
       45

CSS - спрайт изображения: активный не работает, т.е.

1 голос
/ 31 декабря 2011

Вот мой код, который отлично работает во всех, кроме т. Е.! Актив просто не стреляет 

    a.Button span {
background: transparent url('images/form_sprite.png') no-repeat 0 0;
display: block;
height:45px;
line-height: 30px;
padding: 7px 0 5px 20px;
color: #fff;
background-position: 0 -44px;
}

a.Button {
background: transparent url('images/form_sprite.png') no-repeat top right;
display: block;
float: left;
height: 45px;
margin-right: 6px;
padding-right: 27px;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
}

a.Button:hover span {
background-position: 0 -136px;
}

a.Button:hover {
background-position: right -90px;
}

a.Button:active span {
background-position: 0 -225px;
}

a.Button:active {
background-position: right -181px;
}

Это HTML: 

<div class="clearbutton"> <a class="Button" href="#"><span>Button text</span></a> </div>

Есть идеи, пожалуйста?

Ответы [ 2 ]

1 голос
/ 31 декабря 2011

попробуйте изменить a.Button:active на a.Button span:active в вашем CSS. Кажется, это запускает :active CSS и все еще работает в Chrome для меня.

0 голосов
/ 31 декабря 2011

Да, псевдо-класс :active срабатывает только в IE, когда пользователь нажимает непосредственно на этом объекте. В этом случае ссылка. Если вы щелкнете по дочернему объекту (диапазону), активное событие ссылки не сработает.

Вы можете, как сказала Aninemity, применить стиль к span:active (правильный способ сделать это). Но в IE6 / 7 :active срабатывает только для ссылок. Если вам нужна поддержка IE6 / 7, вам нужно найти способ избавиться от пролета.

...