IE6 Навигация зависает - PullRequest
Новая
       9

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

1 голос
/ 01 декабря 2008

Я использую следующий код для навигации не-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 ]

4 голосов
/ 01 декабря 2008

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

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

Кстати: к сожалению, популярные программы чтения с экрана не читают что-либо с display:none, поэтому ваше меню становится недоступным.

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

2 голосов
/ 04 декабря 2008

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

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

Затем вы можете избавиться от тега img и его стиля (отображение: нет и т. Д.)

И ссылки должны быть такими: 

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

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

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

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

1 голос
/ 01 декабря 2008

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

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");
}
...