Hola a todos.
Necesito ayuda por favor con un "problema" que no puedo resolver hace horas.
Quiero que, al pasar el cursor por un botón blanco, éste cambie a negro, y al sacarlo, regrese a blanco, pero además, que cuando le de click el botón cambie a rojo, y al darle otro click, retorne a blanco.... ¿Parece sencillo no?.. Yo también pensé lo mismo.. Tal vez para ustedes sí sea fácil, por eso posteo.
AQUÍ MI CÓDIGO DE EJEMPLO :
Código Javascript
:
Ver original/*HOVER*/
$( 'div' ).hover( function ( ) {
$( this ).css( 'background', '#000' ) ;
}, function ( ) {
$( this ).css( 'background', '#fff' ) ;
} ) ;
/*CLICK*/
$( 'div' ).click( function ( ) {
$( this ).css( 'background', '#f00' ) ;
} ) ;
Todo bien cuando hago hover ; al entrar el botón cambia a negro y al salir regresa a blanco. Todo bien también cuando hago click ( el elemento se pinta de rojo ). El problema viene cuando salgo del botón, pues como el efecto hover está activado, el color rojo del botón cambia a blanco, y la idea es que se quede en rojo hasta que lo pinche otra vez, y nuevamente retorne a blanco.
No se me ocurre ninguna forma para desactivar el hover. He probado con condicionales, deteniendo animaciones, y nada. No sé qué me pasa hoy ; creo que, de estar tantas horas intentando e intentando ya me aburrí, y no tengo ganas de seguir...
Ojalá me puedan ayudar.