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!
 Celular Mp15 C Wi Fi Tv 2.0 Java Cam.11mp C Zoom Flash Gsm Mais info» R$ 399.99 até 18x de 30.00 |  Celular Mp9 Mp10 Mp15 C5000 Wifi Java Msn Email 2 Chips Tv Mais info» R$ 319.99 até 18x de 24.00 |  Celular Mp10 Mp12 T929 Dual Chip Tv Grátis Câmeras 8.0 Flash Mais info» R$ 265.99 até 18x de 19.95 |
| Vitrine TecnoBlog |
Loading ...