O efeito/evento conhecido como hover ocorre quando posicionamos o cursor do mouse sobre um elemento da página, como um link ou um botão. Com CSS é possível aplicar um estilo específico a links (tags <a>) quando eles recebem o foco do mouse usando a pseudo-classe :hover. Quando tiramos o cursor do mouse de sobre os links, eles perdem a classe :hover e consequentemente o estilo aplicado. Essa classe é muito comumente utilizada na construção de menus com CSS, para modificar a aparência do link quando posicionamos o cursor sobre ele.
Mas se precisarmos tratar essa situação em um outro elemento, como um botão ou uma div? Com CSS não é possível, pois esses elementos não são compatíveis com a classe :hover. Logo, é preciso recorrer a JavaScript para tratar dois eventos: o onmouseenter e o onmouseleave, que ocorrem quando o cursor é colocado sobre o elemento e retirado dele, respectivamente.
Na Listagem 1 vemos um exemplo de tratamento destes eventos em uma div, em que alteramos a cor do plano de fundo da div para vermelho quando o cursor é posicionado sobre ela e para branco quando o cursor é removido.
Listagem 1: Tratando os eventos onmouseenter e onmouseleave com JavaScript
<div id=”divTeste” onmouseenter="this.style.background='red';" onmouseleave="this.style.background='white';">Passe o mouse aqui.</div>O mesmo poderia ser feito em uma tag script, capturando o elemento div pelo id e criando dois event handlers. Porém, vemos que ao longo do tempo essa tarefa se torna extensa e cansativa devido a repetição de códigos como o uso da função getElementById e criação de funções para tratar os eventos.
jQuery hover
Para tornar essa tarefa mais simples e prática, a biblioteca jQuery oferece uma função chamada hover() que permite definir o tratamento dos eventos onmouseenter e onmouseleave dentro de uma única chamada, criando duas funções internamente.
A sintaxe dessa função é a seguinte:
$(elemento).hover(função ao entrar, função ao sair);
Sendo assim, o tratamento da div do exemplo acima poderia ser simplificado da seguinte forma:
Listagem 2: Função jQuery hover
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
$(function(){
$("#divTeste").hover(
function(){
//Ao posicionar o cursor sobre a div
$(this).css('background', 'red');
},
function(){
//Ao remover o cursor da div
$(this).css('background', 'white');
}
);
});
</script>
</head>
<body>
<div id="divTeste">Passe o mouse aqui.</div>
</body>
</html>Observe que nem mesmo foi preciso dar um nome às funções de tratamento dos eventos e que ambas ficam contidas na chamada da função hover, facilitando a manutenção e mantendo o código mais organizado.
Neste caso usamos apenas uma uma linha de código em cada função, mas rotinas mais extensas poderiam ser igualmente executadas. Salve o conteúdo da Listagem 2 como um arquivo de extensão html e abra no browser. Ao passar o cursor sobre a div, a cor do plano de fundo será alterada para vermelho e ao remover o cursor, essa cor será alterada novamente para branco.
Para maiores detalhes sobre a função hover visite a documentação oficial: http://api.jquery.com/hover/.
O objetivo desta dica foi apresentar brevemente a função hover e demonstrar como utilizá-la. Até a próxima.
