JQuery - funkcja klikania i najechania nie działa poprawnie - javascript, jquery, html, css

Mam dwa przyciski, z którymi pracuję, próbuję zrobić efekt najechania kursorem, a kiedy użytkownik kliknie przycisk, ma zdarzenie kliknięcia.

Bawiłem się kilkoma metodami jquery, takimi jak najechanie myszką itp., Ale nadal nie mam szczęścia. Chodzi o to, aby najechać wskaźnikiem myszy tylko na elementy, które nie zostały jeszcze wybrane.

Problem z poniższym kodem polega na tym, że po wybraniu przycisku, jeśli użytkownik umieści kursor nad wybraną metodą, pozbędzie się jego bieżącego stanu.

Czy to sposób na pozbycie się obecnego stanu po wybraniu przycisku?

Dzięki

$(".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");
});

Odpowiedzi:

4 dla odpowiedzi № 1

Poleciłbym odciążenie wielu z tych zadań za pomocą CSS

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

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

I dla twojego JS

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

---

1 dla odpowiedzi nr 2

Ustaw zmienną w swoim click funkcje, a następnie sprawdź to za pomocą instrukcji if w swoim mouseover i mouseleave Funkcje. Na przykład:

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 dla odpowiedzi nr 3

Wolę używać removeClass i addClass. Jeśli użyjesz removeClass bez parametrów, wszystkie klasy zostaną usunięte z elementu. Dodaj klasę, którą chcesz. Możesz to zrobić na przykład:

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

W ten sposób style są oddzielone od skryptów, czyli zawsze dobra praktyka. Spróbuj przepisać swój kod w ten sposób. Jeśli masz jakieś pytania, po prostu zapytaj w komentarzu, zaktualizuję swoją odpowiedź :).

PS. Oczywiście musisz umieścić „twoja_klasa” w pliku style.css :).

Z poważaniem

---