Ativando .hover e .first-child no IE 6 - um novo método
Tamo de volta malucada
Todos aqui devem saber que as pseudo-classes do CSS 2 :hover e :first-child não funcionam direito no IE6 né? A hover só funciona em links.
Porém vossas senhorias já devem conhecer inúmeras ténicas secretas ninja para simular as pseudo classe hover e first-child no IE 6 né? Técnicas com javascript simples, técnicas com libs javascript, arquivo htc, etc
Abaixo eu mostro uma nova técnica que o mico inventou enquanto estava desenvolvendo sua Micox-mini-css-lib (em breve em um blog perto de você).
A vantagem da minha criança é que ela pode ser colocada direto no seu CSS, em qualquer lugar dele (de preferencia no começo). Ela é baseada em javascript dentro do CSS.
Para ativar, você deve usar as classes .hover em conjunto com a :hover OU .first-child em conjunto com a :first-child nos elementos onde deseja o efeito. Tipo assim:
li:first-child , li.first-child { color: red }
Abaixo, o código que faz a mágica e deve ser colocado no começo do seu css. Quem não entender me pergunta nos comments.
Micox Pseudo-class-css2 to IE (MXPC)
/* Micox Pseudo-class-css2 to IE (MXPC). Activate .hover and .first-child in IE 6 */
* html * { color: expression( (function(who){ if(!who.MXPC){
who.MXPC = '1';
if(who.nodeName != 'A'){
who.onmouseenter=function(){ who.className += ' hover'};
who.onmouseleave=function(){ who.className = who.className.replace(' hover','')}; }
(who==who.parentNode.firstChild) ? who.className += ' first-child' : '' ;
} } )(this) , 'auto') }
/* example */
p:first-child , p.first-child { color: red }
li:hover a , li.hover a { background-color: blue }
“Viiixxxxxx maria, onde eu coloco isso mico?” - Não tema o código Sr.! Apenas coloque ele no começo do seu CSS. Veja esta página de exemplo e zóie o código fonte dela.
O bom é que esta idéia do expression pode ser usada para outras gambiarras também. Em breve eu devo voltar com mais.
Em breve tô de volta. Té mais.
Março 6th, 2008 20:32
Cara, muito doido isso! Isso só funciona no IE ou funciona no FF/OP também?
Muito boa a idéia, já tinha ouvido falar de JS no CSS, mas não imaginava que fosse possível assim!
Março 6th, 2008 23:47
Só funfa no IE6 (qualquer modo) e IE7 modo não standard (que não suporta o hover e o first-child também).
Março 7th, 2008 10:12
Impressionante, já tinha ouvido falar também de de javascript no css, mas nunca fizcoisa alguma. Gostei muito.
Aí micox, tá sabendo o IEca 8 beta já está disponível, devo confessar que me surpreendeu bastante, pelo que pude ver tem umas configurações legais e o IE Developer Toolbar está bem melhor, lembra mais o firebug. Tentarei fazer um release dele. Muito bom.
abs
Março 7th, 2008 10:18
Aguardando heim Ramon. hehe
(afinal eu sou sempre o último a baixar novos browsers. Não sei porque hehe. O IE7 vim pegar estes dias heheh)
Março 7th, 2008 10:19
soh pra deixar uma ressalva que as vezes essas expressões dentro do css as vezes travam o IE…
tive experiencias desagradaveis aqui na globo, que nos fizeram mudar de idéia na utilização dessas expressões…
mas de repente, com sites pequenos, não tenha problema… eu acho =D
Março 7th, 2008 10:23
Dulcetti é que você tem que estar sempre ligado que aquilo alí é executado constantemente.
Portanto tem que abusar de flags (como eu fiz no who.MXPC) e ficar ligado pra não deixar “cascatear”, ou seja, criar loops infinitos.
No começo do desenvolvimento dessa técnica aí eu tive problema com travamento, mas depois que percebi isto, achei as soluções.
Testei em um site de galeria (Webly galeria) que estou fazendo e rodou belezura.
Quem for usar o expression é só tomar cuidado com as cascatas.
Abril 10th, 2008 08:53
Cara, achei seu código aqui sobre o hover no IE6, mas ele não funcionou neste caso abaixo. Tem como funcionar?
.botoes_login:hover{
background-color:red;
}
fazendo a mudandça…
.botoes_login:hover, .botoes_login .hover{
background-color:red;
}
Abril 10th, 2008 08:57
Frederico, neste caso o correto seria assim
.botoes_login:hover, .botoes_login.hover
(com o .hover emendado ao botoes_login)
Abril 14th, 2008 20:32
Muuuuuito bom esse código. Vou usar sempre agora!
Abril 18th, 2008 16:58
Sensacional!
Já havia utilizado expression no css antes, + nunca havia encontrado uma aplicabilidade tão legal quanto essa.
Junho 28th, 2008 17:59
Tive problemas de lentidão no IE usando essa técnica. Mas corrigi com uma alteração simples. Em vez de usar * html *, coloquei o comando apontando para o ponto exato de onde eu iria querer que o script funcionasse.
Por exemplo:
#Menu li{ [scriptcompleto] }
Setembro 16th, 2008 17:10
Não entendi muito bem, na parte que necessito usar o pseudo junto class. Quando você diz isso, vc esta dizendo que eu devo criar uma class com nome de .hover e .first-child ?
Setembro 16th, 2008 17:15
Bom, depende, é só olhar o exemplo:
p:first-child , p.first-child { color: red }
li:hover a , li.hover a { background-color: blue }
Na primeira declaração, os primeiros ‘p’ vão ficar azuis. Na segunda, os li vão ficar com o fundo azul ao passar o mouse sobre eles.