Blog Web Standards

Soluções para os problemas enfrentados pelos desenvolvedores HTML e CSS no dia-a-dia

Uma das diversas limitações apresentadas pelo IE6 está relacionada ao uso de pseudo-classes. Uma delas é a “:hover” que só pode ser usada em links.

Porém, em alguns casos, precisamos dela para fazer determinados efeitos ou funcionalidades do site, como menus dropdown.

Para poder aplicar a pseudo-classe “:hover”, “:active” ou “:focus” em qualquer elemento no IE6, você deve:

– Baixar o arquivo .htc neste link;
– Inserir o código abaixo em seu CSS, utilizando o caminho do arquivo .htc relativo ao HTML:

body { behavior: url(css/csshover2.htc); } /* inclui efeito :hover, :active e :focus para Internet Explorer 6 */

13 comentários

Responder
  1. 16 de fevereiro de 2009

    Aurélio Forbellone disse:

    Essa dica é muito útil, boa iniciativa difundir mais ela, parabéns pra todos!

  2. 17 de março de 2009

    Cristian Trentin disse:

    Muito boa a dica.. mas ainda penso que quem usa IE6 não merece nem ter acesso a Internet…

    []s

  3. 12 de agosto de 2009

    Daniel Thales disse:

    Muito boa a dica e de simples utilização !

  4. 17 de setembro de 2009

    Francisco Zoletti disse:

    ME AJUDARAM MUITO COM ESSA DICA, valeu

  5. 14 de outubro de 2009

    Vitor disse:

    Pessoal, se eu quiser utilizar na página index o caminho será : url(index.htm/csshover2.htc);
    ??? Está certo?
    Não consegui fazer funcionar.

  6. 14 de outubro de 2009

    Carlitos disse:

    @Vitor:

    Então, o caminho do arquivo tem que ser relativo a página atual.

    Se você colocar o arquivo na mesma pasta do HTML, é só colocar:

    url(csshover2.htc);

    Agora, se o HTML fica na pasta raíz e o arquivo ficar dentro da pasta CSS, é só fazer como ilustramos:

    url(css/csshover2.htc);

    O princípio é bem simples!

  7. 13 de janeiro de 2010

    Wellington Torrejais da Silva disse:

    Ja estou usando.Valeu pela Dica !!!

  8. 18 de janeiro de 2010

    Altamiro Junior disse:

    Tenho algo parecido no sistema que estou desenvolvendo, mas no firefox não funciona!!!
    AQlguém tem alguma dica?

  9. 18 de janeiro de 2010

    Altamiro Junior disse:

    O meu CSS está assim: table.tabela1 td { behavior: url(includes/htc/hilite.htc)}

  10. 9 de fevereiro de 2010

    g3 disse:

    Olá Altamiro, usamos essa solução de :hover e :focus apenas para o Internet Explorer 6, pois as versões superiores do Internet Explorer e outros navegadores como Firefox, Chrome, Safari e Opera já tem suporte ao :hover e :focus.

  11. 24 de março de 2010

    Luan disse:

    Ótima Dica..

  12. 21 de outubro de 2010

    Kellison disse:

    Vlw cara. Me ajudou bastante !!

    Obg

  13. 3 de janeiro de 2012

    Alexandre Broggio disse:

    Vlw pela dica

Escreva seu comentário