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

Lun

Mar

Mie

Jue

Vie

Sab

Dom

Esta web utiliza cookies para obtener datos estadísticos de la navegación de sus usuarios. Política de privacidad y Aviso legal

Rechazar Aceptar

Google