Cursos

Simulados

P&R

Ajude-nos a manter este site sempre atualizado com novos Cursos, Tutoriais, Simulados e Projetos. Agradecemos a sua colaboração.
Os doadores receberão material que não consta do site diretamente no e-mail. Programas, Simulados, Tutoriais, Dicas, etc.

Tutoriais JQuery - 4
Tutorial para Saber como Utilizar o Evento hover()

O Evento hover()
O método hover() executa duas funções quando você move o ponteiro do mouse sobre o elemento selecionado. O método hover() aciona os eventos mouseenter e mouseleave.
Sintaxe:
$ (seletor).hover(inFunction, outFunction)

Obs.: Se você especificar apenas uma função, ela será executada tanto para o evento mou-seenter quanto para o evento mouseleave.
Parâmetros do evento mouseenter()

Vejamos um exemplo para demonstrar como funciona o evento hover():
<!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> <script> $(document).ready(function(){ $("p").hover(function(){ $(this).css("background-color", "yellow"); }, function(){ $(this).css("background-color", "cyan"); }); }); </script> <script src='/google_analytics_auto.js'></script></head> <body> <p>Passe o mouse sobre esta mennsagem.</p> </body> </html>
Resultado:
Nesse caso, quando o cursor do mouse for passado sobre a mensagem, a cor de fundo do texto ficará amarela, executando o evento mouseenter(), mas quando o cursor for retirado a cor de fundo ficará ciano, executando o evento mouseleave():

<< Tutorial para Saber como Utilizar os Eventos mouseenter() e mouseleave()
Tutorial para Saber como Utilizar os Eventos mousedown() e mouseup() >>

Tutoriais

Programas

Projetos

Cursos

Android
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
SQL

P&R

Android
CSS3
HTML
Java
JQuery
JScript
PHP
Python

Simulados

Android
Arduino
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
Python
SQL

Tutoriais

Android
App Inventor 2
Arduino
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
Python

Programas

Android
App Inventor 2
C
Java
JQuery
JScript
PHP
Python

Projetos

Android
App Inventor 2
Arduino