Como já devemos saber, se tivermos lido até este ponto o Manual de jQuery, existem diversos eventos que se invocam ao realizar ações com o mouse, como clicks, movimento do ponteiro ou posicionar o ponteiro sobre certos elementos. Neste artigo utilizaremos mouseenter e mouseleave, que são os eventos mais interessantes e úteis se queremos detectar o momento em que entramos com o ponteiro do mouse sobre um elemento ou saímos de sua superfície.
Além disso, utilizaremos o objeto evento, que recebe a função com a que implementamos o manipulador do evento, que tem diversos dados úteis sobre o evento que se acaba de executar. Neste artigo, mostraremos como verificar a posição do mouse no momento de se produzir o evento, que podemos extrair com as propriedades pageX e pageY do objeto evento.
Para realizar coisas quando o mouse entra e sai de um elemento, utilizaremos os manipuladores de eventos de jQuery mouseenter e mouseleave, que se produzem ao entrar com o mouse sobre um elemento e ao sair do elemento respectivamente. Desse modo, os eventos mouseenter e mouseleave terão de ser criados sobre o elemento que permanece sempre visível, mostrando e ocultando a camada que contém o tip.
Vejamos antes de tudo o HTML que teremos com o elemento visível e seu tip.
<div id="elemento1" style="background-color: #ccccff; padding: 5px;">Passe o mouse por cima deste "elemento1".</div>
<div class="tip" id="tip1">Isto é para explicar algo sobre o elemento1</div>
Além disso, aplicamos estilos ao tip por meio de CSS:
background-color: #ffcc99;
padding: 10px;
display: none;
position: absolute;
Os estilos importantes aqui são display: none; (para que o elemento esteja oculto inicialmente) e position: absolute; (para que o possamos posicionar livremente pela página e sem afetar outros elementos).
Vejamos agora o código do evento mouseenter:
$("#elemento1").mouseenter(function(evento){
$("#tip1").css("left", evento.pageX + 5);
$("#tip1").css("top", evento.pageY + 5);
$("#tip1").css("display", "block");
});
Simplesmente trocamos as propriedades de CSS "left" e "top" da camada do tip, atribuindo valores através de evento.pageX e evento.pageY, as propriedades do objeto evento que nos dão a posição do mouse. Com isto situamos a camada do tip em um lugar próximo de onde estava o mouse.
Em seguida se troca o atributo de CSS display da camada do tip, para o valor "block", que serve para que esse elemento se veja na página.
Agora vejamos o evento mouseleave, para realizar ações quando tiramos o mouse de cima de um elemento.
$("#elemento1").mouseleave(function(e){
$("#tip1").css("display", "none");
});
Simplesmente trocamos a propriedade CSS display do tip, para o valor "none", que faz com que essa camada desapareça da página.
Vejamos o código completo de uma página que implementa este mecanismo para produzir tips em jQuery.
<html>
<head>
<title>Trabalhando com eventos - Tip simples</title>
<style type="text/css">
.tip{
background-color: #ffcc99;
padding: 10px;
display: none;
position: absolute;
}
</style>
<script src="../jquery-1.4.1.min.js"></script>
<script>
$(document).ready(function(){
$("#elemento1").mouseenter(function(e){
$("#tip1").css("left", e.pageX + 5);
$("#tip1").css("top", e.pageY + 5);
$("#tip1").css("display", "block");
});
$("#elemento1").mouseleave(function(e){
$("#tip1").css("display", "none");
});
$("#elemento2").mouseenter(function(e){
$("#tip2").css("left", e.pageX + 5);
$("#tip2").css("top", e.pageY + 5);
$("#tip2").css("display", "block");
});
$("#elemento2").mouseleave(function(e){
$("#tip2").css("display", "none");
});
})
</script>
</head>
<body>
<h1>Trabalhando com eventos em jQuery</h1>
<div id="elemento1" style="background-color: #ccccff; padding: 5px;">Passe o mouse por cima deste "elemento1".</div>
<p>
Este texto é para colocar <a id="elemento2" href="#">outro elemento com tip</a>.
</p>
<div class="tip" id="tip1">Isto é para explicar algo sobre o elemento1</div>
<div class="tip" id="tip2">Explico melhor este outro elemento com tip!!</div>
</body>
</html>
Agora podemos ver o exercício em funcionamento.
Com isto estamos aprendendo um pouco mais sobre eventos em jQuery. Vimos duas aplicações interessantes de eventos de mouse, concretamente mouseenter e mouseleave .Porém, ainda faltam muitas coisas por ver que deixaremos para próximos artigos.
