Использование CSS-спрайта на двух изображениях

Question

Я использую этот HTML-код для своих кнопок:

<a id="my-button" class="btn" name="my-button" href="#">
<span>Some text</span>
</a>

Моя кнопка на самом деле состоит из двух изображений, определенных в CSS (я использую спрайты CSS):

.btn {
    background-image: url(images/btn-left.png);
}

.btn:hover {
    background-position:0 -27px;
}

.btn span {
    background-image: url(images/btn-right.png);
}

.btn span:hover {
    background-position:0 -27px;
}

Я могу поместить текст любого размера в промежуток. Когда я пересекаю промежуток, левая и правая кнопки изменяются, но когда я просто наведите курсор на метку (изображение в несколько пикселей), там меняется только левая кнопка, а не правая ...

Как изменить стиль диапазона, когда я наведите курсор на тег?

Answer 1

Я не уверен, зачем вам нужен промежуток?Почему бы не использовать одно изображение спрайта, поэтому вам нужно только загрузить одно изображение и получить что-то вроде:

<a class="btn" name="my-button" href="#">
Some text
</a>

и использовать CSS для обработки состояния наведения.

.btn {
   width: xxx;
   height: xxx;
   background-image: url(images/btn-left.png);
   background-position:top; /* use one long image with both states for active and    hover */
   display:block;
}
.btn:hover {
  background-position:bottom; /* moves the image down on hover to the lower part of the image */
}

Я сделал небольшой пример, очевидно, просто используя цвет вместо изображения.Проверьте это: http://jsfiddle.net/kkj8n/

Просто переключите цвет фона на изображение и используйте background-position для изменения положения.

Answer 2

напишите так:

.btn:hover {
    background-position:0 -27px;
}
.btn:hover span{
    background-position:0 -27px;
}

ИЛИ

Если позиция фона такая же, напишите так:

.btn:hover, .btn:hover span {
        background-position:0 -27px;
    }