La funzione click e hover di JQuery non funziona correttamente: javascript, jquery, html, css

Ho due pulsanti con cui sto lavorando, sto cercando di creare un effetto hover e quando l'utente fa clic sul pulsante ha un evento cliccato.

Ho giocato con alcuni metodi jquery come mouseover mouseout ecc. Ma ancora senza fortuna. L'idea è di fare in modo che il passaggio del mouse funzioni solo su elementi che non sono già stati selezionati.

Il problema con il codice seguente è che una volta che un pulsante è stato selezionato se l'utente passa il mouse sul metodo selezionato, si sbarazza del suo stato corrente.

È un modo per non sbarazzarsi dello stato attuale una volta che un pulsante è stato selezionato?

Grazie

$(".M").click(function(){
$(this).css("background-color","#515B69");
$(this).css("color","#fff");
$(".F").css("color","#515B69");
$(".F").css("background-color","#fff");
});

$(".M").mouseover(function() {
$(this).css("background-color","#515B69");
$(this).css("color","#fff");
});

$(".M").mouseleave(function(){
$(this).css("color","#515B69");
$(this).css("background-color","#fff");
});

$(".F").click(function(){
$(this).css("background-color","#515B69");
$(this).css("color","#fff");
$(".M").css("color","#515B69");
$(".M").css("background-color","#fff");
});

$(".M").mouseover(function() {
$(this).css("background-color","#515B69");
$(this).css("color","#fff");
});

$(".F").mouseleave(function(){
$(this).css("color","#515B69");
$(this).css("background-color","#fff");
});

risposte:

4 per risposta № 1

Consiglierei di scaricare molte di queste attività con CSS

.M, .F {
background-color: #fff;
color: #515B69;
}

.M.active, .M:hover,
.F.active, .F:hover {
color: #fff;
background-color: #515B69;
}

E per il tuo JS

$(".M, .F").on("click", function () {
$(".M, .F").removeClass("active");
$(this).addClass("active");
});

---

1 per risposta № 2

Imposta una variabile nel tuo file click funzioni e quindi controllalo con le istruzioni if ​​nel tuo file mouseover e mouseleave funzioni. Per esempio:

var clicked = 0;

$(".F").click(function(){
$(this).css("background-color","#515B69");
$(this).css("color","#fff");
$(".M").css("color","#515B69");
$(".M").css("background-color","#fff");
clicked = 1;
});

if (clicked > 0){
$(".F").mouseover(function() {
$(this).css("background-color","#515B69");
$(this).css("color","#fff");
});
}

---

1 per risposta № 3

Preferirei usare removeClass e addClass. Se usi removeClass senza parametri, tutte le classi verranno rimosse dall'elemento. Quindi aggiungi la classe che desideri. Puoi farlo in questo modo, ad esempio:

$(selector).removeClass().addClass("your_class");

In questo modo, gli stili sono separati dagli script, ovvero sempre una buona pratica. Prova a riscrivere il tuo codice in questo modo. Se hai domande, chiedi semplicemente in un commento, aggiornerò la mia risposta :).

PS. Ovviamente devi inserire "your_class" nel file style.css :).

I migliori saluti

---