JavaScript Onmuseover puanlama ekranı yapma

.puan .number label:hover {
    background-color: hsl(25, 97%, 53%);
    color: white;
}

.puan .number label:hover {
    background-color: hsl(25, 97%, 53%);
    color: white;
}

labels.forEach(function (label) {
    label.addEventListener("click", function () {
        labels.forEach(function (label) {
            label.style.backgroundColor = "hsla(216, 12%, 54%, 0.149)";
        })
        label.style.backgroundColor = "hsl(218, 6%, 39%)";
    })
})

labels.forEach(function (label) {
    label.onmouseover = function () {
        label.style.backgroundColor = "hsl(25, 97%, 53%)";
    }
    label.onmouseout = function() {
        label.style.backgroundColor = "hsla(216, 12%, 54%, 0.149)";
    }
    label.addEventListener("click", function () {
        labels.forEach(function (label) {
            label.style.backgroundColor = "hsla(216, 12%, 54%, 0.149)";
        })
        label.style.backgroundColor = "hsl(218, 6%, 39%)";
    })
})

1. Butonların varsayılan rengi = Tamam
2. Seçilen butonun rengi = Olmadı
3. Hover olayının rengi = Tamam

01yildizmustafa dedi:

@bonz

Kod:Panoya kopyala

.puan .number label:hover {
    background-color: hsl(25, 97%, 53%);
    color: white;
}

Fare üzerine gelince hover olayını css ile yapmıştım.
Ama Kullanıcı seçim yaptıktan sonra css hover kodu çalışmıyor.

Son durumum:

Kod:Panoya kopyala

.puan .number label:hover {
    background-color: hsl(25, 97%, 53%);
    color: white;
}

Kod:Panoya kopyala

labels.forEach(function (label) {
    label.addEventListener("click", function () {
        labels.forEach(function (label) {
            label.style.backgroundColor = "hsla(216, 12%, 54%, 0.149)";
        })
        label.style.backgroundColor = "hsl(218, 6%, 39%)";
    })
})

Bu durumda şu sorun var:

Hover olayı gerçekleşiyor fakat kullanıcı seçim yaptıktan sonra hover çalışmıyor.

@bonz

Kod:Panoya kopyala

labels.forEach(function (label) {
    label.onmouseover = function () {
        label.style.backgroundColor = "hsl(25, 97%, 53%)";
    }
    label.onmouseout = function() {
        label.style.backgroundColor = "hsla(216, 12%, 54%, 0.149)";
    }
    label.addEventListener("click", function () {
        labels.forEach(function (label) {
            label.style.backgroundColor = "hsla(216, 12%, 54%, 0.149)";
        })
        label.style.backgroundColor = "hsl(218, 6%, 39%)";
    })
})

Aslında böyle yapınca çözüme biraz daha yaklaşıyorum.
Tek sorun şu kalıyor:

Kullanıcının seçtiği butonun 3. bir renge sahip olmaması.
Ben seçinlen butonun 3. bir renge sahip olmasını istiyorum.
Yani;

1. Butonların varsayılan rengi = Tamam
2. Seçilen butonun rengi = Olmadı
3. Hover olayının rengi = Tamam

@bonz
Yardımcı olabilecek misiniz?

Genişletmek için tıkla...