JQuery функцията за щракване и преместване не работи правилно - javascript, jquery, html, css

Имам два бутона, с които работя, опитвам се да направя ефект на задържане и когато потребителят натисне бутона, има събитие с кликване.

Играех с няколко метода на jquery, като например мишката върху мишката и т.н., но все още няма късмет. Идеята е да накарате курсора да работи само върху елементи, които вече не са избрани.

Проблемът с кода по-долу е, че след като бъде избран бутон, ако потребителят задържи курсора върху избрания метод, той се отърва от текущото си състояние.

Има ли начин да не се отърват от текущото състояние, след като е избран бутон?

Благодаря

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

Отговори:

4 за отговор № 1

Бих препоръчал да разтоварите много от тези задачи с CSS

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

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

И за вашия JS

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

---

1 за отговор № 2

Задайте променлива във вашия click функции и след това го проверете дали изявления във вашия mouseover и mouseleave функции. Например:

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 за отговор № 3

Предпочитам да използвам RemoveClass и addClass. Ако използвате RemoveClass без параметри, всички класове ще бъдат премахнати от елемента. След това добавете Class, който искате. Можете да го направите по този начин, например:

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

По този начин стиловете се отделят от скриптове, което е винаги добра практика. Опитайте се да пренапишете кода си по този начин. Ако имате някакви въпроси, просто попитайте в коментар, ще актуализирам отговора си :).

PS. Разбира се, трябва да поставите "your_class" във файл style.css :).

С Най-Добри Пожелания

---