Temas > Programacion > Java script - Java > Eventos mouseover y mouseout en jQuery
Julio

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













¿Has olviado tu contraseña?

Pulsa aquí para registrate




Google




LunMarMieJueVieSabDom
    123
45678910
11121314151617
181920 21222324
252627282930 

Jueves 21 de Noviembre 2024
Semana 47

..............................................................................................................................................................................................................................................
(Contacto)..
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