Warning: Use of undefined constant tema - assumed 'tema' (this will throw an Error in a future version of PHP) in /home/vhosts/lawebderay.orgfree.com/articulos.php on line 199

Warning: Use of undefined constant tema - assumed 'tema' (this will throw an Error in a future version of PHP) in /home/vhosts/lawebderay.orgfree.com/articulos.php on line 220

Warning: Use of undefined constant id - assumed 'id' (this will throw an Error in a future version of PHP) in /home/vhosts/lawebderay.orgfree.com/articulos.php on line 220

2.3 Pasando el cursor sobre un elemento con el método mouseover() y mouseout().

Un efecto que se ve bastante bien es las páginas web es cuando se pasa el cursor del mouse sobre algún menú y este repentinamente  cambia de color, y tan pronto se retira el cursor, este elemento vuelve a su color original. Para indicar que el cursor esta sobre un elemento usamos el método .mouseover() y para indicar que el cursor ya no esta sobre un elemento usamos .mouesout().Para poder entender su funcionamiento supongamos que tenemos un div con la clase “opcion”, dicho elemento contiene un texto, y deseamos que al momento de pasar el cursor sobre este elemento queremos que el texto cambie a rojo y cuando el cursor ya no está sobre el elemento queremos que el texto vuelva a ser negro, en código HTML necesario para ello sería el siguiente:

<div class=”opcion”>Este texto cambia a color rojo cuando se para el cursor por encima!!!</div>

Entonces el código Jquery necesario para realizar este efecto sencillo sería el siguiente:

$(document).redy(function(){
    $(“.opcion”).mouseover(function(){
                     $(this).css(“color”,”#FF0000”);
            });
  $(“.opcion”).mouseout(function(){
                  $(this).css(“color”,”#000000”);
      });

});

El código en Jquery consiste en los siguiente:

• La primera parte $(document).ready(function(){}); sirve para indicar a javascript que las funciones de jquery se ejecutarán hasta después de que el código HTML se haya cargado por completo.
• La segunda parte     $(“.opcion”).mouseover(function(){}); sirve para seleccionar el elemento al cual se le aplicará el efecto en este caso el div con la clase “opción”, y bueno pues el evento en este caso es .mouseover(), es decir cuando el cursor este sobre el elemento.
• La tercera parte es $(this).css(“color”,”#FF0000”);  y se puede ver que $(this) hace referencia al elemento al cual se le aplica un evento en este caso el div con la clase “opcion”.
• La cuarta parte $(“.opcion”).mouseout(function(){}); sirve para indicar lo que sucederá con el elemento con la clase “opción” una vez que el cursor se haya retirado, esto por medio del método .mouseout().
• La última parte $(this).css(“color”,”#000000”); hace referencia al elemento al cual se le aplica el evento, esto a través del selector $(this) que hace referencia al elemento div con la clase “opcion”  y después se cambia el color por medio del método css().