CSS меню с использованием спрайта изображения с прозрачными пленками - PullRequest
Новая
       15

CSS меню с использованием спрайта изображения с прозрачными пленками

0 голосов
/ 14 февраля 2011

Это моя проблема.

У меня есть меню, использующее спрайт изображения, изображение имеет прозрачные пленки, но когда я добавляю: hover, оно работает, но я все еще могу видеть исходное изображение вконец.

Есть ли способ сделать так, чтобы при наведении курсора на изображение, которое я хочу, и ЗАМЕНА оригинала?

Спасибо,

Марко

1 Ответ

1 голос
/ 14 февраля 2011

Вы можете заменить изображение, используя его как background-image вместо тега <img>.

Но в большинстве случаев это происходит медленно, и, возможно, это хорошая практика:

  1. Создайте изображение с изображением: hover рядом с ним [img | hoverImg]
  2. Выполните стилизацию с background-position для изменения фона.

Как это: 

.menuItem
{
    background-image: url('hello.jpg');
    width:100px;
    height:30px;
}

.menuItem:hover
{
    background-position: 100px; /* Or whatever measure your image is */
}

Проблема в том, что размер изображения фиксирован. Вы действительно должны указать это, вместо того, чтобы делать это с изображением.

Мне нравится это как лучший способ. Если вы хотите установить src в своем <img>, это можно сделать с помощью Javascript, но в большинстве случаев это намного тяжелее, поскольку вам необходимо загрузить дополнительное изображение с сервера.

...