专门用于 :Hover 的元素覆盖 :Active 的等效类

Question

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

.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;}

Answer 1

:active伪类应该在:hover之后，否则:hover覆盖(链接相关的伪clasess的顺序是：: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;
}

<div class="backgroundRed backgroundBlueHover backgroundGreenActive" style="width: 100px; height: 100px;"></div>

您需要更多 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;
}

<div class="backgroundRed backgroundBlueHover backgroundGreenActive" style="width: 100px; height: 100px;"></div>