Solução hover no IE6 com jQuery

Bom, trago pra vocês assíduos  leitores do Novidades na Web a solução para o funcionamento do hover no IE6. Fiz esse tutorial pra explicar como é fácil de resolver isso com jQuery. Desta forma o hover funcionará em todos os browsers

Veja o exemplo do tutorial em funcionamento:  resultado final.

1ª parte:

Vamos criar o código html do nosso formulário. Repare que coloquei classes nos inputs e textarea, é indispensável para funcionamento correto no ie6.

<h1>Formulário exemplo</h1>
<form action="" id="form" name="form" method="post">

<label for="nome">Nome</label>
<input type="text" id="nome" name="nome" class="input" />

<label for="email">e-mail</label>
<input type="text" id="email" name="email" class="input"/>

<label for="telefone">Telefone</label>
<input type="text" id="telefone" name="telefone" class="input" />

<label for="msg">Mensagem</label>
<textarea name="msg" id="msg" cols="0" rows="0" class="textarea"></textarea>

<input type="submit" value="Enviar" class="botao"/>

</form>

2ª parte:

Vamos criar o código css do nosso formulário.

h1{
font-size:        20px;
font-family:      Verdana, Geneva, sans-serif;
}

#form{
width:            305px;
height:           300px;
background-color: #eee;
border:           #ccc 1px solid;
padding:          15px;
}

#form .input{
width:            300px;
color:            #666;
border:           #CCC 1px solid;
padding:          2px 1px;
}

#form .textarea{
width:            300px;
color:            #666;
height:           100px;
float:            left;
border:           #CCC 1px solid;
padding:          1px;
}

#form .botao{
background-color: #666;
border:           0;
color:            #FFF;
float:            left;
font-size:        15px;
margin:           18px 0;
padding:          3px;
width:            65px;
font-weight:      700;
clear:            both;

}

3ª parte:

Vamos criar o código jQuery para funcionamento do hover. Para isso, primeiro teremos de incluir primeiro o código js do jQuery, caso não tenha pegue aqui.

<script type="text/javascript" src="js/jquery-1.2.6.js"></script>

depois de incluir o código do jQuery, criaremos o código que irá adicionar o hover.

$(document).ready(function() {
$('input[type=submit]').hover(function(){
$(this).css("background-color","#E0661C");
}, function(){
$(this).css("background-color","#666");
});

$('input[type=text], textarea').hover(function(){
$(this).css({border: "#E0661C 1px solid"});
}, function(){
$(this).css({border: "#CCC 1px solid"});
});
});

Depois é só salvar o arquivo, e adicioná-lo no seu html.

<script type="text/javascript" src="js/exemplo-hover-ie6.js"></script>

Concluindo:

Viu como foi simples. Se preferir, deixo os arquivos para download abaixo e o link para o resultado final (se precisar dê uma olhada no código fonte).

Veja o exemplo do tutorial em funcionamento:  resultado final.
jQuery:  jquery 1.2.6.js
Código hover:  exemplo-hover-ie6.js

Espero que ajude vocês pois antes desta solução hover no ie6 pramim era algo que não tinha como fazer. Dúvidas, é so postar seu comentário que respondo. Até a próxima!

Hp Dv6 1355 Core2duo 2.2 4gb Ddr3 Hd500 15.6led Tec Numérico Mais info» R$ 1,699.00 até 18x de 127.43	Hp Dv6 1350 Core2duo 2.2 4gb Hd320 15 Led Bluetooth Bat12cel Mais info» R$ 1,749.00 até 18x de 131.18	Netbook Asus Eeepc 1005pe 250gb N450 1.66ghz 2gb Bat 11hrs Mais info» R$ 1,059.00 até 18x de 79.43
Vitrine TecnoBlog