paira IE6 navegação

Question

Eu estou usando o código a seguir para ter um-JS não navegação:

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

E o 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;
}

O meu problema é que eles não vão mudar imagens em pairar no IE6. Eu estou usando o :hover em uma âncora de modo que deve ser fino e estou usando display em vez de visibility que é outra coisa que não funciona no IE6.

Eu realmente gostaria de não ter de adicionar uma carga de javascript para a imagem substituindo / pré-carregamento (incorporando algo como jQuery não é uma opção) -? Alguém pode me ajudar aqui

Obrigado,

Answer 1

IE não repintar âncoras menos que qualquer regra sobre <a> em si muda. Adicionar qualquer coisa para a:hover, por exemplo:.

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

BTW:. Leitores de tela, infelizmente populares não ler as coisas com display:none, assim que suas extremidades MENU até ser inacessível

Eu sugiro tendo <img> visível por padrão, e escondendo-o em foco.

Answer 2

Concordo com o que Jason está dizendo aqui, mas se você quiser ambas as imagens sejam armazenadas em cache antes do usuário passa o cursor sobre os links, então por que usar duas imagens?

Eu vim com uma pequena idéia de um tempo atrás, que eu gosto de usar, que é ter ambos os estados normais e em foco do botão como a mesma imagem, o estado normal do botão na parte superior eo estado de foco da botão abaixo, isso significa que ambos os estados do botão são armazenados em cache de imediato, como a mesma imagem! E você não tem um monte de imagens diferentes para diferentes estados de seus botões encher sua pasta de imagens, apenas uma imagem que se refere a todos os estados dessa ligação.

Em seguida, você pode se livrar de você img tag e seu estilo (display: none etc)

E ter as ligações denominar assim:

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

Você terá que colocar uma altura no link aswell, então ele não mostra qualquer parte do outro Estado, faz sentido do link? Seu corte efetivamente a imagem de fundo ao meio com os estilos de elementos de dimensão.

sem javascript necessário & e mudança de estado é instantânea como a imagem já está carregado:)

espero que isso ajude!

Answer 3

Você também pode usar a base sobre a marca de âncora para ser seu titular imagem.

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