Assine:
Ativando .hover E .first-child No Ie 6 - Um Novo Método
Nova técnica: sem arquivo htc, sem arquivos externos,
Escrito por Micox em WebStandards e CSS. Data: 06/03/2008
Licença: Alguns direitos reservados. Dar créditos ao autor e linkar este original
Fonte: http://elmicox.blogspot.com/2008/03/ativan...no-ie-6-um.html
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. Abaixo, o código. Quem não entender me pergunta nos comments.
"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.
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. Abaixo, o código. Quem não entender me pergunta nos comments.
CODE
/* 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') }
/* exemplo de uso*/
p:first-child , p.first-child { color: red }
li:hover a , li.hover a { color: green; }
* 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') }
/* exemplo de uso*/
p:first-child , p.first-child { color: red }
li:hover a , li.hover a { color: green; }
"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.
Mais recentes em WebStandards e CSS
- Mini-lib css reset do micox
- Por Micox - Abaixo mostrarei tipo uma mini-lib css com o qual eu...
- Mapear regiao
- Por faro - Substituindo a tag map pelo css....
- Layout diferente.
- Por faro - Boa noite pessoal como vão todos... esse é meu primeiro...
- Rollover via css
- Por NightSpy - Achei este efeito na net, como não achei novamente,...
- Menu drop-down só com css - até 4 níveis
- Por Micox - Código pronto - só copiar, colar e usar...
Ver mais Artigos de WebStandards e CSS.
Ver e retirar outras dúvidas no fórum Webly.
Alguns Direitos Reservados | RSS | O Fórum
Webly Portal e Fóruns - Internet + Humana | Design by ArthurHenrique.com
Comentários:
Zappa disse:
sei que já faz um tempinho mas vamo lá....
percebi uma restrição no seu script e acho q seria interessante se pudesse contornar... já q seus códigos são bem completos... (e eu não manjo nada de js)
não é possivel aplicar o efeito hover diferente para elementos com classes diferentes...
ex:
seu script...parara parara
li.link-1:hover , li.hover-1 {...}
li.link-21:hover , li.hover-2 {...}
compreende...
quando puder da uma revisada, pois em uma de minhas alquimias seu script estava sendo de grande ajuda... até me deparar com esta restrição...
falow
abraço
Micox disse:
li.classetal:hover , li.classetal.hover {}
Zappa disse:
tente vc q vera...
Micox disse:
terá que procurar outro mesmo e que este outro não seja baseado no mesmo esquema de usar .hover ...
Ver o restante dos comentários no fórum (e aproveitar pra comentar também !).