Навигация IE6 зависает

Question

Я использую следующий код для навигации, отличной от JS:

<ol id="navigation">
    <li id="home"><a href="#"><img src="./images/nav/home-hover.png" alt="Home" /></li>
    ...
</ol>

И CSS:

#navigation a {
    display: block;
    height: 25px;
}

#navigation a img {
    display: none;
}

#navigation a:hover img {
    display: block;
}

#home a {
    background: url('./images/nav/home-normal.png') no-repeat;
    width: 100px;
}

Моя проблема в том, что они не меняют изображения при наведении курсора мыши в IE6.я использую :hover на якоре, так что все будет в порядке, и я использую display скорее, чем visibility это еще одна вещь, которая не работает в IE6.

Мне бы очень хотелось не добавлять загрузку javascript для замены/предварительной загрузки изображений (встраивание чего-то вроде jQuery не является вариантом) - может ли кто-нибудь мне здесь помочь?

Спасибо,

Answer 1

IE не перерисовывает привязки, если не установлено какое-либо правило. <a> сам меняется.Добавьте что-нибудь для a:hover, например:

 #navigation a:hover {border:0} /* no-op */

КСТАТИ:к сожалению, популярные программы чтения с экрана не читают ничего с помощью display:none, поэтому ваше меню становится недоступным.

Я предлагаю иметь <img> отображается по умолчанию и скрывается при наведении курсора.

Answer 2

Я согласен с тем, что здесь говорит Джейсон, но если вы хотите, чтобы оба изображения кэшировались до того, как пользователь наведет курсор на ссылки, то зачем использовать два изображения?

Некоторое время назад у меня возникла небольшая идея, которую мне нравится использовать: как обычное состояние кнопки, так и состояние при наведении, это одно и то же изображение, нормальное состояние кнопки вверху и состояние при наведении кнопки внизу. это означает, что оба состояния кнопки кэшируются сразу, так как это одно и то же изображение!И у вас нет множества разных изображений для разных состояний ваших кнопок, заполняющих папку изображений, есть только одно изображение, которое относится к каждому состоянию этой ссылки.

Затем вы можете избавиться от тега img и его стиля (display: none и т. д.).

И сделайте ссылки такими:

#home a {    
    background: url('./images/nav/home-normal.png') no-repeat left top;    
    width: 100px;
}
#home a:hover {    
    background-position:left bottom;
}

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

Javascript не требуется, и изменение состояния происходит мгновенно, поскольку изображение уже загружено :)

надеюсь это поможет!

Answer 3

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

HTML:

<ol>
 <li><a href="#"></a></li>
</ol>

CSS:

li a{
 background:url("link.jpg");
 display:block;
 width:100px;
 height:50px;
} 

li a:hover{
 background:url("link2.jpg");
}