将 :hover 样式应用于具有相同类的所有元素答案

【问题标题】：Apply :hover styling to all elements that have the same class将 :hover 样式应用于具有相同类的所有元素
【发布时间】：2017-10-30 03:36:03
【问题描述】：

我正在尝试对所有具有 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 代码。这是为什么呢？

【问题讨论】：

您需要提供minimal reproducible example，而不是没有 HTML 的 CSS 小片段。
你的代码.. ....'
“有人可以澄清一下我是如何做到这一点的吗？” - 单独使用 CSS：完全没有。（也许如果所有按钮都有一个共同的父级，那么悬停父级可以为子按钮着色 - 但这在大多数布局情况下可能行不通。）这将需要一些 JavaScript。
stackoverflow.com/questions/1935820/set-ahover-based-on-class
然后发布您的代码]

标签： css html

【解决方案1】：

阅读您的 cmets，如果您将鼠标悬停在父元素上，我想您希望所有按钮上都有金色。

如果是这样，你可以这样做

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

【讨论】：