专门用于 :hover 的元素覆盖 :active 的等效类答案

【问题标题】：elements specifically for :hover overriding the an equivalent class for :active专门用于 :hover 的元素覆盖 :active 的等效类
【发布时间】：2016-07-26 17:32:50
【问题描述】：

我的代码有一个背景，其字体颜色分配给一个类，然后有单独的类用于更改 :hover 或 :active 上的颜色，但除非我删除 :hover 特定类，否则不会触发 :active 状态。 CODEPEN

HTML：

<div class="backgroundRed backgroundGreenHover backgroundBlueActive" style="width: 100px; height: 100px;"></div>

CSS：

.backgroundRed, .backgroundRedHover:hover, .backgroundRedActive:active{background:red;}
    .backgroundGreen, .backgroundGreenHover:hover, .backgroundGreenActive:active{background:green;}
    .backgroundBlue, .backgroundBlueHover:hover, .backgroundBlueActive:active{background:blue;}

【问题讨论】：

标签： html css hover states

【解决方案1】：

:active 伪类应该在:hover 之后，否则:hover 会覆盖（链接相关伪类的顺序是：:link | :visited | :hover | :active。）。您的代码示例按预期工作，但如果您更改类，:active 伪类将永远不适用。

.backgroundRed,
.backgroundRedHover:hover,
.backgroundRedActive:active {
  background: red;
}

.backgroundGreen,
.backgroundGreenHover:hover,
.backgroundGreenActive:active {
  background: green;
}

.backgroundBlue,
.backgroundBlueHover:hover,
.backgroundBlueActive:active {
  background: blue;
}

&lt;div class="backgroundRed backgroundBlueHover backgroundGreenActive" style="width: 100px; height: 100px;"&gt;&lt;/div&gt;

您需要更多的 CSS 行，但在 :hover 之后使用 :active 重新排序类可以正常工作。

.backgroundRed,
.backgroundRedHover:hover {
  background: red;
}

.backgroundGreen,
.backgroundGreenHover:hover {
  background: green;
}

.backgroundBlue,
.backgroundBlueHover:hover {
  background: blue;
}

.backgroundRedActive:active {
  background: red;
}

.backgroundGreenActive:active {
  background: green;
}

.backgroundBlueActive:active {
  background: blue;
}

&lt;div class="backgroundRed backgroundBlueHover backgroundGreenActive" style="width: 100px; height: 100px;"&gt;&lt;/div&gt;

【讨论】：