Necesito que un div
tenga un estilo cuando le pase el cursor encima (hover
), y otro estilo cuando le haga un click
.
//HTML
<div>texto</div>
//HOVER JS
$('div').hover(function() {
$(this).css({'background-color':'black', 'color:white'})
}, function () {
$(this).css({'background-color':'white', 'color:black'})
})
//CLICK JS
$('div').click(function() {
$(this).css({'background-color:red', 'color:yellow'})
})
Al inicio funciona bien. Cuando paso el cursor sobre el div, el fondo de éste se vuelve negro y las letras blancas; cuando retiro el cursor, el fondo retorna a blanco (o transparente) y las letras a negras. Luego, cuando le doy click al div, el fondo de éste se torna rojo y sus letras amarillas, pero aquí el problema!..
Al momento de retirar el cursor de mi div rojo, el fondo de éste se pinta de blanco y las letras de negro.. Es decir, el hover tiene cola, y su efecto pesa más que el efecto del click.. ¿se entiende? Quisiera que cuando le haga click al div, se quedara en rojo, anulando el efecto anterior del hover. O sea que el hover funcione solo hasta que haga click. Eso quiero.