Esta web utiliza cookies para obtener datos estadísticos de la navegación de sus usuarios.
Política de privacidad y Aviso legal
Temas > Programacion > Java script - Java > Eventos mouseover y mouseout en jQuery
Eventos mouseover y mouseout
Los eventos de JavaScript onmouseover y onmouseout
son los equivalentes mouseover y mouseout de jQuery.
Estos eventos están generalmente unidos. El primero
se dispara cuando ingresamos la flecha del mouse a un
elemento HTML y el segundo cuando sacamos la flecha
del control.
Para probar estos dos eventos implementaremos una
página que contenga tres botones y cuando ingrese la
flecha del mouse al botón cambiaremos el color de texto
del mismo, retornando el color original cuando retiramos
la flecha del control. Implementaremos una página que
contenga tres hipervínculos, cuando ingrese la flecha del
mouse al hipervínculo cambiaremos el color de fondo,
retornando el color original cuando retiramos la flecha
del elemento.
pagina1.html
<?php //esto no va
<html>
<head>
<title>Problema</title>
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript" src="funciones.js"></script>
</head>
<body>
<a href="http://www.lavoz.com.ar">La Voz del Interior</a>
<br>
<a href="http://www.lanacion.com.ar">La nación</a>
<br>
<a href="http://www.clarin.com.ar">El clarín</a>
<br>
</body>
</html>
?>//esto no va
funciones.js
<?php //esto no va
var x;
x=$(document);
x.ready(inicializarEventos);
function inicializarEventos()
{
var x;
x=$("a");
x.mouseover(entraMouse);
x.mouseout(saleMouse);
}
function entraMouse()
{
$(this).css("background-color","#ff0");
}
function saleMouse()
{
$(this).css("background-color","#fff");
}
?>//esto no va
Lo primero que hacemos es asignar las funciones a
ejecutarse cuando ocurren los evento mouseover y
mouseout:
<?php //esto no va
var x;
x=$("a");
x.mouseover(entraMouse);
x.mouseout(saleMouse);
?>//esto no va
La función entraMouse accede al elemento que recibe
en su interior el mouse (la obtenemos mediante la
referencia que guarda this) y cambia el color de la
propiedad text-background del CSS:
<?php //esto no va
function entraMouse()
{
$(this).css("background-color","#ff0");
}
De forma similar la función saleMouse retorna al color original:
function saleMouse()
{
$(this).css("background-color","#fff");
}
?>//esto no va| Lun | Mar | Mie | Jue | Vie | Sab | Dom |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | |
| 7 | 8 | 9 | 10 | 11 | 12 | 13 |
| 14 | 15 | 16 | 17 | 18 | 19 | 20 |
| 21 | 22 | 23 | 24 | 25 | 26 | 27 |
| 28 | 29 | 30 |
Miercoles 9 de Abril 2025
Semana 15
