• Revista PROGRAMAR: Já está disponível a edição #53 da revista programar. Faz já o download aqui!

infopc

[JavaScript] Substituir pseudo class :hover

5 mensagens neste tópico

Boas pessoal. Vocês não acham extremamente irritante o explorer 6 não identificar a pseudo class :hover? Eu acho.

Desenvolvi um pequeno código js que resolve a situação. Basta criar uma class para o estado normal e outra para o hover. Ex:

<style>
.teste {width:60px; border:1px solid #cc0000;}

.teste-hover {width:60px; border:1px solid #000000;}
</style>

com um bocadinho de js

<script type="text/javascript" language="javascript">
function func_hover(){
this.className = this.className + '-hover';
}

function func_out(){
this.className = this.className.replace('-hover','');
}

function inihover(){
   var lis = document.getElementsByTagName ('li');
   for (i=0; i<lis.length; i++){
       lis[i].onmouseover = func_hover;
       lis[i].onmouseout = func_out;
       }
}

window.onload = inihover;
</script>

Neste caso a norma é aplicada a todos os li

espero que ajude, fiquem bem

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Eu uso hover no IE e nunca me deu problemas!

me too... não percebo porque criaste isso..

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Eu uso hover no IE e nunca me deu problemas!

me too... não percebo porque criaste isso..

provavelmente para funcionamento com layers e não com a, no i7 já funciona mas no ie6 não

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Boas,

Também andei com esse problema (maldito IE  :wallbash:)

Uma outra forma de resolver é com o JQuery.

Exemplo:

Html

		
<div id="topnav">
<a href="www.portugal-a-programar.org"><img src="images/imagem1.gif" alt="im1"  border="0" /></a>
<a href="http://www.google.com"><img src="images/imagem2.gif" alt="im2r" border="0" /></a> 
</div>

Script

<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
        $('##topnav img'').hover(function(){
               $(this).addClass('over');
        }, function() {
               $(this).removeClass('over');
        });
});

</script>

Css:

.over {background-color: #ffff00;}

[]s

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!


Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.


Entrar Agora