Изображение при наведении курсора показывает только исходное изображение без изображения при наведении курсора при попытке создать спрайт. Есть идеи? - PullRequest
Новая
       22

Изображение при наведении курсора показывает только исходное изображение без изображения при наведении курсора при попытке создать спрайт. Есть идеи?

0 голосов
/ 26 июля 2011

Я попытался создать спрайт, скопировав код, который вы дали в файл userbar.php. Я сохранил CSS так же, как и выше. Я сохранил файл с фотошопом «save for web -> gif 64 no dither» и сохранил небольшое пространство между двумя изображениями в файле. Затем я загрузил его и сослался на файл. Но почему-то показывает только нормальное изображение без наведения. Есть идеи, что я там не так сделал? Код для php: 

.myButton {
background-image: url(/wp-content/themes/cosmicbuddy/_inc/images/see.gif);
display: block;
height: 22px;
width: 22px;
} 
.myButton:hover {
background-position: x y;
}

Исходная тема: Как я могу сделать этот код наведения короче? И как я могу создать CSS-файл, который реализует настройки для более чем одной кнопки?

Ответы [ 3 ]

0 голосов
/ 26 июля 2011 
.myButton:hover {
  background-position: 5px 5px;
}
0 голосов
/ 26 июля 2011

Одним из решений может быть указание фактических позиционных значений для спрайтов, расположенных в see.gif, поскольку неясно, используете ли вы x y в качестве значений или просто в качестве заполнителя для фрагмента выше.

Если это не заполнитель, ну да, в этом ваша проблема. Просто измените x в фактическую x-позицию, а y в y-позицию, и все будет в порядке.

0 голосов
/ 26 июля 2011

Попробуйте 

.myButton:hover {
    background-position-x: -22px;
}

если спрайт горизонтальный, иначе background-position-y.

Для лучшего понимания спрайтов, посмотрите эту статью о спайтах в сетях + .

...