Efeito hover com JQuery

Dias atrás eu falei sobre a biblioteca JQuery. Hoje vou postar um exemplo bastante útil para a maioria de nós: o efeito hover em elementos que não o permitem com css puro.

Primeiramente, eu estou postando esse exemplo influenciado pela função aplicarHover(), postada pelo Jean Carlo no seu blog.

Mas mãos a obra.

Primeiro, vamos utilizar um html simples, só pra servir de referência. Queremos um efeito Hover em todas as div's com a classe comments.

O HTML:

<h3 class=”comments_title”>
    comentário simples
</h3>

<div class=”comments”>
    Este é apenas um comentário.
</div>

Temos então uma estrutura de comentários no HTML e queremos aplicar nesses comentários um efeito que faça trocar a cor de fundo, borda e fonte na hora que o mouse estiver sobre o elemento.

Vamos ao CSS:

h3.comments_title {
    color: #82A5CB;
}

.comments {
    border: 1px solid silver;
    background: #E6E6E6;
    color: #666;
}

.comments_hover {
    border: 1px solid #6E85AF !important;
    background: #B4D0F8 !important;
}

Acima temos as regras para os elementos 'normais' e os que estiverem sob a seta do mouse (comments_hover). Note o !important nas declarações do comments_hover. Isso é necessário, pois não vamos 'trocar' de classes, vamos apenas inserir e remover a classe hover, e como ela tem declarações já feitas antes, para evitar conflitos colocamos o !important.

Vamos agora ao javascript para nosso exemplo:

<!--primeiro carregamos a biblioteca JQuery -->

<script type=”text/javascript” src=”jquery.latest.js”>
</script>


<!-- agora o código que vai fazer a troca de classes conforme a mudança de estado -->

<script type=”text/javascript”>
window.onload = inicia;
function inicia(){
    $(“div.comments”).mouseover(function (){
        $(this).addClass(“comments_hover”);
    }).mouseout(function (){
        $(this).removeClass(“comments_hover”);
    });
}
</script>

Pronto! Só isso tudo! Simples ou não? E o melhor: divertido. :)

Se você quiser trabalhar diferente, pode criar uma função que receba como parâmetros os tipos de elementos e a classe do estado hover, e fazer a mudança a partir daí. Por exemplo:

function setHover(elementTp, classHover){
   $(elementTp).mouseover(function (){
        $(this).addClass(classHover);
    }).mouseout(function (){
        $(this).removeClass(classHover);
    });
}

então você pode usar pra fazer o efeito hover onde quiser. Veja:

setHover(“quote.livros”, “livros_hover”); 

Isso vai fazer acontecer a mudança no estado over em todos os elementos quote com classe livros, adicionando/tirando a classe livros_hover

Legal, não?

Vemos que aos poucos tarefas antes bastante complexas ou demoradas ficam fáceis e as já fáceis e ágeis ficam ainda mais fáceis e ágeis com JQuery.

É isso então, vamos ver mais alguns bons exemplos de diversão com javascript e a JQuery em breve.
Até lá.