miércoles, 13 de agosto de 2014

Añadir los eventos mouseover y mouseout para añadir y quitar una clase CSS

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");
});

No hay comentarios:

Publicar un comentario