Anular efecto Hover al hacer click en un botón

[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