Falso hover no Internet Explorer
Por: Henrique C. Pereira
Publicado em Friday 28 April 2006 às 13:19Categoria: HTML/CSS/JScript
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.
Comentários dos leitores
Este artigo possui 25 comentários
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?
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/
Muito interessante isso…
Vou dar uma estudada mais afundo.
Abraços
"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!
Muito obrigado Mario Suzuki pela atenção eu já vi o seu post e logo vou estudar esse site…
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.
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
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.
Olá
Eu encontrei um problema nesse script, ele não funcona em imagens.
Alguem conseguiu fazer um :hover em imagens no ie?
att.
Ricardo
very good .. vou testar
Ficou muito louco! Sou seu fã e você sabe disso!
Grande abraço!
Valeu pela dica…..me ajudou muito….ela foi muito importante
Ótima solução
muito boa a dica..valeu!!!
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!!!!
Santa Informação! :D
[]s
Ótimo!
Show de bola!
estava procurando isso à tempo.
valeu a dica!
cara..
faz sem javascript mesmo..
a#menuQualquer {
width:200px;
height:20px;
background-color: red;
color: #fff;
}
a#menuQualquer:hover {
background-coloc: black;
}
========
menuQualquer
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!
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…
vlwz..
ajudou muito ^^
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.
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
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!
Eu realmente amor por você para convidados postando em revolucao.etc.br