Ativando .hover e .first-child no IE 6 - um novo método
Posted by micox at Março 6th, 2008
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.
.
