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.

25 thoughts on “Falso hover no Internet Explorer”

  1. 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?

  2. 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 😀

    Valeu!

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

  3. "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!

  4. 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.

  5. 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

  6. 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.

  7. Olá

    Eu encontrei um problema nesse script, ele não funcona em imagens.
    Alguem conseguiu fazer um :hover em imagens no ie?

    att.
    Ricardo

  8. 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!!!!

  9. cara..
    faz sem javascript mesmo..

    a#menuQualquer {
    width:200px;
    height:20px;
    background-color: red;
    color: #fff;
    }
    a#menuQualquer:hover {
    background-coloc: black;
    }
    ========
    menuQualquer

  10. 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!

  11. 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…

  12. 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!

  13. 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

Leave a Reply

Your email address will not be published. Required fields are marked *