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