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>


<p class="”comments”">
  Este é apenas um comentário.</pre>
  
  
  <p>
    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.
  </p>
  
  
  <p>
    <strong>Vamos ao CSS</strong>:
  </p>

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 -->





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

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á.