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

Posted 2023-03-29

【中文标题】将 :hover 样式应用于具有相同类的所有元素

【英文标题】：Apply :hover styling to all elements that have the same class

【发布时间】：2017-10-30 03:36:03

【问题描述】：

我正在尝试对所有具有 dialog-btn 类的 button 标记应用悬停效果。我试过.dialog-btn:hoverbackground-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。

***.com/questions/1935820/set-ahover-based-on-class

然后发布您的代码]

【参考方案1】：

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

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

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

【讨论】：

.dialog-btn:hover... 仅在我没有 id yes 和 about 的样式时有效

这是因为 id 比 class 具有更高的特异性。要么你不应该使用 id 要么使用background-color: gold!important;

谢谢！解决了它！