[SOLUCIONADO] Anular efecto Hover al hacer click en un botón

[eduardobrutaldeath]

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 HTML:

<div>
BOTÓN
</div>
 

Código Javascript:

/*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.

[Alexis88]

Utiliza una variable con valor que cambie cada vez que des un clic en el botón, de tal forma que puedas utilizarla en una condición dentro de la función manejadora del método .hover(). Por ejemplo, si el valor de la variable es igual a 1, dejas que se aplique el efecto; caso contrario, lo ignoras.

Un saludo

[eduardobrutaldeath]

Iniciado por Alexis88

Utiliza una variable con valor que cambie cada vez que des un clic en el botón, de tal forma que puedas utilizarla en una condición dentro de la función manejadora del método .hover(). Por ejemplo, si el valor de la variable es igual a 1, dejas que se aplique el efecto; caso contrario, lo ignoras.

Un saludo

Hola.
No funciona.
Ayer intenté algo parecido, sólo que no lo mostré porque era muy largo. Mira, aquí un ejemplo breve :

Código Javascript:

var c = "click" ;
 
$( 'div' ).click( function (  ) {
 
  $( this ).toggleClass( 'click' ) ;
 
  if ( $( this ).attr( 'class' ) !== c ) {
 
    $( this ).hover( function (  ) {
 
      $( this ).css( 'color', 'blue' ) ;
 
    }, function (  ) {
 
      $( this ).css( 'color', 'red' ) ;
 
    } ) ;
 
  } else {
 
    $( this ).css( {
 
      color : '#fff',
      background : '#000'
 
    } ) ;
 
  }
 
} ) ;
 

Cuando hago click, al div se le asigna la clase CLICK, y su estilo pasa a ser, fondo negro y letras blancas. Cuando vuelvo a hacer click, se elimina la clase del elemento y se ejecuta el hover ;es decir, cuando entro las letras son azules y cuando salgo rojas.. Todo bien hasta ahí, pero cuando vuelvo a hacer click y saco el cursor del elemento, el hover se sigue ejecutando. O sea se queda el div negro con letras blancas, pero al salir de él el texto cambia a rojo y al entrar a azul. ¿Entiendes? El hover no muere! U_U

[Alexis88]

El problema no es el establecimiento de la clase sino la lógica que estás aplicando.

Esto puede ayudarte mucho:

Código Javascript:

$("div").on("click", function(){
    $(this).toggleClass("clase");
    if ($(this).hasClass("clase")){
        $(this).css("background", "red");
    }
    else{
        $(this).css("background", "white");
    }
}).hover(function(){
    if (!$(this).hasClass("clase")){
        $(this).css("background", "black");
    }
}, function(){
    if (!$(this).hasClass("clase")){
        $(this).css("background", "white");
    }
});
 

Cuando le des un clic al elemento, se añadirá o quitará la clase; además, se comprobará que este posea dicha clase. En caso de tenerla, se cambiará su color de fondo a rojo; de lo contrario, se establecerá al color blanco como nuevo color de fondo del elemento.

Cuando se pose el cursor del ratón sobre el elemento, se comprobará si el elemento no posee la clase; de ser así, se cambiará su color de fondo a negro, y cuando se retire el cursor del elemento, si este no posee la clase, se le cambiará el color de fondo por el blanco.

DEMO

[eduardobrutaldeath]

Iniciado por Alexis88

El problema no es el establecimiento de la clase sino la lógica que estás aplicando.

Esto puede ayudarte mucho:

Código Javascript:

$("div").on("click", function(){
    $(this).toggleClass("clase");
    if ($(this).hasClass("clase")){
        $(this).css("background", "red");
    }
    else{
        $(this).css("background", "white");
    }
}).hover(function(){
    if (!$(this).hasClass("clase")){
        $(this).css("background", "black");
    }
}, function(){
    if (!$(this).hasClass("clase")){
        $(this).css("background", "white");
    }
});
 

Cuando le des un clic al elemento, se añadirá o quitará la clase; además, se comprobará que este posea dicha clase. En caso de tenerla, se cambiará su color de fondo a rojo; de lo contrario, se establecerá al color blanco como nuevo color de fondo del elemento.

Cuando se pose el cursor del ratón sobre el elemento, se comprobará si el elemento no posee la clase; de ser así, se cambiará su color de fondo a negro, y cuando se retire el cursor del elemento, si este no posee la clase, se le cambiará el color de fondo por el blanco.

DEMO

Estoy comparando y tratando de comprender qué hizo la diferencia, por qué tu condición sí funcionó y la mía no.
Como sea, te agradezco por tomarte un tiempo para resolver mi problema.
Chau, y otra vez gracias.