Anwenden: Hover-Stil auf alle Elemente mit der gleichen Klasse

Question

Ich versuche, einen Hover-Effekt auf alle button Tags mit der Klasse dialog-btn anzuwenden. Ich habe versucht .dialog-btn:hover{background-color:gold}, aber das funktioniert nicht. Ich habe auch andere Vorschläge zu ähnlichen Fragen versucht, aber immer noch kein Glück. Kann mir bitte jemand erklären, wie ich das machen kann?

Keines der beiden folgenden Beispiele funktioniert.

button.dialog-btn:hover { 
 
    background-color: gold; 
 
}

<div class="dialog-btns"> 
 
    <button class="dialog-btn" id="yes">Ref Match</button> 
 
    <button class="dialog-btn" id="about">About</button> 
 
</div>

.dialog-btn:hover { 
 
    background-color: gold; 
 
}

<div class="dialog-btns"> 
 
    <button class="dialog-btn" id="yes">Ref Match</button> 
 
    <button class="dialog-btn" id="about">About</button> 
 
</div>

EDIT 2:

#yes{ 
    background-color:green; 
} 
#about{ 
    background-color:purple; 
} 

Der obige Code erscheint über den .dialog-btn:hover Code zu überschreiben. Warum das?

Answer 1

Ich lese Ihre Kommentare, ich glaube, Sie möchten Goldfarbe auf alle Ihre Tasten haben, wenn Sie über Parrent Element schweben.

Wenn dies der Fall ist, können Sie das tun

.dialog-btns:hover .dialog-btn{ 
background-color: gold; 
}