Избегайте мерцания мыши

Question

У меня есть простая ссылка в меню

<a id="Home" href="Amico-Bio-Home-Page"></a>

к которому я применяю следующий стиль

#Home{
background-image:url(../Images/Menu/home.png);

фон-повторить: не повторять; границы: нет; Дисплей: блок; высота: 70px; текст-отделка: нет; ширина: 78px; плыть налево; отступы: 0 7px; }

#Home:hover {
 background-image: url(../Images/Menu/homeOn.png);
}

когда я перехожу по ссылке, изображения меняются местами.

при смене изображений ссылка на мгновение исчезает.

Знаете ли вы, как этого избежать?

спасибо

Answer 1

Спрайты: Является ли css-sprite хорошей техникой?

Answer 2

Вы должны использовать спрайт-листы изображений. Подробное руководство по ним смотрите здесь: http://css -tricks.com / css-sprites /

Answer 3

Я бы посоветовал вообще избегать изображений и использовать CSS для стилизации ваших ссылок. Вы можете многого добиться с помощью CSS3 фона и градиентов границ, текстовых теней и многого другого. Проверьте: http://www.webdesignerwall.com/tutorials/css3-gradient-buttons/ и http://webdesignledger.com/tutorials/12-excellent-css3-button-and-menu-techniques для вдохновения и кода.

Answer 4

HTML часть

<a><img src="homeOn.png" alt="" width="" height="" /></a>

css part

a {height:px;width:px;background-image:url(home.png)}
a:hover img {visibility:hidden}

добавленный бонус не более Мерцание IE6