Навигация IE6 зависает
Я использую следующий код для навигации без 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 не вариант) - может ли кто-нибудь мне здесь помочь?
Спасибо,
Ответы 3
IE не перерисовывает якоря, пока не изменится какое-либо правило на самом <a>. Добавьте что-нибудь для a:hover, например:
#navigation a:hover {border:0} /* no-op */
Кстати: к сожалению, популярные программы чтения с экрана не читают вещи с помощью display:none, поэтому ваше меню оказывается недоступным.
Я предлагаю сделать <img> видимым по умолчанию и скрывать его при наведении курсора.
Ура! Это помогло мне решить мою проблему с заменой src изображения из jQuery. $ ("# изображение"). attr ("src", "newsrc.jpg"). css ("граница", "0"); заставляет IE6 обновить изображение и показать новый src!
Вы также можете использовать фон тега привязки в качестве держателя изображения.
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");
}
OP хочет, чтобы изображения были кэшированы до того, как пользователь наведет курсор на элементы. Может быть, он может добавить несколько тегов <img> в конец файла HTML с помощью display: none ;?
Я согласен с тем, что здесь говорит Джейсон, но если вы хотите, чтобы оба изображения были кэшированы до того, как пользователь наведет курсор на ссылки, тогда зачем использовать два изображения?
Некоторое время назад я придумал небольшую идею, которую мне нравится использовать, которая имеет как нормальное состояние кнопки, так и состояние при наведении курсора на одно и то же изображение, нормальное состояние кнопки вверху и состояние наведения кнопки внизу, это означает, что оба состояния кнопки сразу же кешируются, так как это одно и то же изображение! И у вас нет множества разных изображений для разных состояний ваших кнопок, заполняющих вашу папку изображений, только одно изображение, которое относится к каждому состоянию этой ссылки.
Затем вы можете избавиться от тега 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 не требуется, и изменение состояния происходит мгновенно, так как изображение уже загружено :)
надеюсь это поможет!
Примечание. Вы пропустили закрытие </a>.