Falso hover no Internet Explorer

Todos sabem que o Internet Explorer não fez uma implementação completa de CSS2. E dentre as várias limitações do browser azul uma delas é não compreender o pseudo elemento :hover. Com ele você pode fazer coisas interessantes que os desenvolvedores do passado utilizavam JavaScript inline para simular o mesmo efeito. Nunca gostei desses scripts inlines.

Eu encontrei o script Fake :hover, um arquivo .htc de extensão proprietária da Microsoft que pode ser chamado de dentro de uma regra de CSS dentro em um conditional comment. Veja mais detalhes deste script no XS4ALL. Através dele, o IE 5 e 6 reconhecem minhas regras de CSS que usam o pseudo elemento :hover em qualquer outro elemento como tables e inputs por exemplo. Simples e eficiente.

Para implementar o script, basta salvá-lo (é claro) e utilizar um conditional comment para chamá-lo da seguinte maneira:


<!--[if IE]>
   <style type="text/css">
        body { behavior:url(scripts/csshover.htc); }
   </style>
<![endif]-->

Como o script é chamado de dentro de um conditional comment, mesmo que o código esteja presente em todas as páginas para todos os browsers, apenas o Internet Explorer vai parsear e tratar seu conteúdo, ficando invisível para os browsers mais inteligentes. Eu apliquei este exemplo no hotsite do e-MBA (o conteúdo não está mais disponível) da Webroom em Uberlândia. Façam seus textes usando o Internet Explorer passando o cursor sobre as tr das tabelas e veja que realmente funciona.

  • gabriel caires

    Muito legal isso de não precisar de javascrip inline,eu testei em site que logo estará no ar e funciona bem, mas será que não é possível desenvolver um desse para o :focus e quem sabe para as outras pseudo classe?

    E a pergunta fica no ar…se um arquivo desse concerta um dos muito bugs do ie6 então porque a Microsoft não lança algum path para corrigir esse erro, nem que pra isso fosse preciso chamar alguns desses arquivos automaticamente?

  • Mario Suzuki

    Olá Henrique,

    Primeiramente gostaria de parabenizá-lo pelo site, desde que conheci (faz umas 2 semanas) passei a ler muitos artigos seus e gostei muito do conteúdo. Continue com este belo trabalho.

    Andei pesquisando também e achei um site (Sons of Suckerfish), onde lá eles ensinam a implementar não só o :hover, como também o :focus, como o autor do post acima se referia. Se puder enviar um email a ele com o link, acho que ajudaria :D

    Valeu!

    http://www.htmldog.com/articles/suckerfish/

  • http://lucasaf.wordpress.com Lucas Alves

    Muito interessante isso…

    Vou dar uma estudada mais afundo.

    Abraços

  • Ricardo

    "Com ele você pode fazer coisas interessantes que os desenvolvedores DO passado utilizavam JavaScript inline para simular o mesmo efeito."

    Falando assim parece ate que ninguem mais usa isso… mas ficou interessante a colocacao – tendendo aos web standards.

    Seria ideal que fossem implementados nos editores WYSIOWYS tambem do passado (what you see is only what you see).

    Falou!

  • gabriel caires

    Muito obrigado Mario Suzuki pela atenção eu já vi o seu post e logo vou estudar esse site…

  • Alexandre Gomes Gaig

    Já usava há muito… e existe uma versão csshover2.htc, que também tem active e focus para todos os elementos, o que é muito interessante, embora não funcione exatamente bem quanto o hover.

  • http://chackalsjc.wordpress.com felipe tonello

    Verdade.. eu discubri isso na prática mesmo.. infelizmente tive q mudar um monte de coisa no meu layout pois estava usando essa propriedade no firefox aí quando fui ver no IE não funcionava… que bom que tem uma solução..

    Abraços

  • Zephon

    Não esqueçam de especificar nos conditional comments que é para o script ser lido pelas versões inferiores a 6 no IE. Pelo menos nos primeiros betas do IE7, esse script fazia o navegador travar e o :hover funcionava normalmente, desde que não houvesse nenhum link por baixo de onde um drop-down apareceria.

  • Ricardo Fero Carlos

    Olá

    Eu encontrei um problema nesse script, ele não funcona em imagens.

    Alguem conseguiu fazer um :hover em imagens no ie?

    att.

    Ricardo

  • Wellington

    very good .. vou testar

  • Tony Lopes

    Ficou muito louco! Sou seu fã e você sabe disso!

    Grande abraço!

  • http://fator-s.com.br/ Estevis

    Valeu pela dica…..me ajudou muito….ela foi muito importante

  • http://elmicox.blogspot.com Micox

    Ótima solução

  • http://www.fasites.com.br criação

    muito boa a dica..valeu!!!

  • Leonardo Proc&oacute

    Mas por utilizar esse script o ie não vai ficar pedindo toda hora pro usuario ficar clicando p/desbloquear não?

    Valeu pelo artigo mano! Muito 10!!!!

  • http://marciotoledo.com/ Marcio Toledo

    Santa Informação! :D

    []s

  • Pablo

    Ótimo!

    Show de bola!

    estava procurando isso à tempo.

    valeu a dica!

  • Marcio

    cara..

    faz sem javascript mesmo..

    a#menuQualquer {

    width:200px;

    height:20px;

    background-color: red;

    color: #fff;

    }

    a#menuQualquer:hover {

    background-coloc: black;

    }

    ========

    menuQualquer

  • Luiz

    Fala ae blz!

    A dica é realmente muito boa, eu inclusive me aproveitei dela, e estava a mil maravilhas, até aparecer o temível IE7, agora não mais funciona, alguem já passou por isso?

    Um abraço!

  • Marcelo

    Pergunta ao contrário! Aqui!

    Primeiro o IE 6 é uma IEka mesmo, mas essa função é habilitada por meio de uma simples folha de estilos, como já foi mencionado anteriormente.

    Ex.:

    body {

    a:hover { text-decoration: none; color:#FFFFFF; background:#FFCC00;}

    Dessa forma todos os links ficam com o fundo amarelo e a letra branca.

    Agora pergunto: Quando tenho essa função, como desabilitar ela para links e imagens específicas? Se alguém souber mande-me um e-mail, pois estou tentando isso agora…

    Tenho um menu em dhtml em que essa função acaba se sobrepondo no IE 6…

    maldito IE… faz a gente perder tempo tantos pequenos detalhes…

  • Carlos

    vlwz..

    ajudou muito ^^

  • http://www.raquelmedeiros.com.br Raquel

    Coloquei o falso hover no meu blog, que é em wordpress, e o hover passou a funcionar no IE. Porém, o layout ficou para a esquerda. O que pode ter acontecido? Vejam no Firefox (que fica perfeito) e no IE http://www.raquelmedeiros.com.br.

  • http://www.raquelmedeiros.com.br Raquel

    Coloquei o falso hover no meu blog em wordpress e ele funcionou no IE7. Porém, o site ficou todo na esquerda da tela. O que pode ter acontecido? O endereço é http://www.raquelmedeiros.com.br

  • leo

    que merda… coloquei esse agora bugou de vez…antes tava funcionando o ie-css3.htc… acrescentei esse agora nem tirando volta ao normal os shadow boxes no IE que merda!

  • http://allanabolics.cc proviron

    Existem alguns pontos interessantes no tempo neste artigo, mas eu não sei se eu ver todos eles centro para o coração. Há alguma validade, mas vou tomar opinião segurar até que eu olhar para ele ainda. Bom artigo, obrigado e queremos mais! revolucao.etc.br adicionado ao FeedBurner bem