jQuery Hover - Dica

Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Para efetuar o download você precisa estar logado. Clique aqui para efetuar o login
Confirmar voto
0
 (0)  (0)

Veja nesta dica como utilizar a função jQuery hover para tratar os eventos que ocorrem quando passamos o cursor do mouse sobre um elemento.

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.

 
Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Receba nossas novidades
Ficou com alguma dúvida?