En este paso vamos a crear un par de eventos que asociaremos a los enlaces. Este par de eventos serán lanzados cuando el
usuario coloque el puntero del ratón sobre el enlace (mouseover) y cuando el usuario retire el ratón del enlace (mouseout).
Por ejemplo, para definir un evento mouseover se tiene que llamar al método mouseover() sobre el elemento que queremos
asociar el evento. Además, al método mouseover() se le envía por parámetro una función con el código que se quiere
ejecutar como respuesta a ese evento.
En el caso de añadir una clase tenemos que utilizar el método addClass(), que se tiene que invocar sobre el elemento al que
queremos añadirle la clase. A addClass() tenemos que pasarle una cadena con el nombre de la clase CSS que queremos
añadir.
Para seleccionar el elemento que queremos añadir la clase hacemos $("#idElemento"), es decir, utilizamos la función dólar
pasándole el identificador del elemento que queremos seleccionar, precedida del carácter "#". Por ejemplo, con $("#capa")
estamos seleccionando un elemento de la página cuyo id="capa".
$("a").mouseover(function(event){
$("#capa").addClass("clasecss");
});
De manera análoga, pero con el método mouseout(), definimos el evento para cuando el usuario saca el puntero del ratón del enlace.
$("a").mouseout(function(event){
$("#capa").removeClass("clasecss");
});
$("a").mouseover(function(event){
$("#capa").addClass("clasecss");
});
De manera análoga, pero con el método mouseout(), definimos el evento para cuando el usuario saca el puntero del ratón del enlace.
$("a").mouseout(function(event){
$("#capa").removeClass("clasecss");
});
No hay comentarios:
Publicar un comentario