應用：將懸停樣式設置爲具有相同類別的所有元素

Question

我試圖將懸停效果應用於類別爲dialog-btn的所有button標記。我試過.dialog-btn:hover{background-color:gold}但這不起作用。我也嘗試過類似問題的其他建議，但仍然沒有運氣。有人可以澄清我怎麼能做到這一點？

以下兩個例子都不起作用。

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>

編輯2：

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

上面的代碼出現覆蓋上述.dialog-btn:hover代碼。這是爲什麼？

Answer 1

閱讀您的評論，我想你想在所有按鈕上都有金色，如果你將鼠標懸停在parrent元素上。

如果是的話，你可以做到這一點

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