JQuery-Klick- und Hover-Funktion funktioniert nicht richtig - javascript, jquery, html, css

Ich habe zwei Schaltflächen, mit denen ich arbeite. Ich versuche, einen Hover-Effekt zu erzielen. Wenn der Benutzer auf die Schaltfläche klickt, wird ein Ereignis angeklickt.

Ich habe ein paar Abfragemethoden wie Mouseover Mouseout usw. ausprobiert, aber immer noch kein Glück. Die Idee ist, den Schwebeflug nur auf Elemente anzuwenden, die noch nicht ausgewählt wurden.

Das Problem mit dem folgenden Code besteht darin, dass nach Auswahl einer Schaltfläche der aktuelle Status gelöscht wird, wenn der Benutzer den Mauszeiger über die ausgewählte Methode bewegt.

Ist es eine Möglichkeit, den aktuellen Status nicht zu löschen, nachdem eine Schaltfläche ausgewählt wurde?

Vielen Dank

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

Antworten:

4 für die Antwort № 1

Ich würde empfehlen, viele dieser Aufgaben mit CSS abzuladen

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

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

Und für dein JS

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

---

1 für die Antwort № 2

Setzen Sie eine Variable in Ihre click funktioniert und prüfe es dann mit if-Anweisungen in deinem mouseover und mouseleave Funktionen. Zum Beispiel:

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 für die Antwort № 3

Ich würde lieber removeClass und addClass verwenden. Wenn Sie removeClass ohne Parameter verwenden, werden alle Klassen aus dem Element entfernt. Fügen Sie dann die gewünschte Klasse hinzu. Du kannst es so machen, zum Beispiel:

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

Auf diese Weise werden Stile von Skripten getrennt immer eine gute Übung. Versuchen Sie, Ihren Code auf diese Weise umzuschreiben. Wenn Sie Fragen haben, fragen Sie einfach in einem Kommentar, ich werde meine Antwort aktualisieren :).

PS. Natürlich müssen Sie "your_class" in die style.css-Datei einfügen :).

Freundliche Grüße

---