专门用于 :hover 的元素覆盖 :active 的等效 class

Question

我有代码让背景的字体颜色分配一个 class 然后有单独的 classes 用于更改 :hover 或 :active 上的颜色但 :active 状态没有除非我删除特定于 :hover 的 class，否则触发。 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;}

Answer 1

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

.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 重新排序 class 行。

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

专门用于 :hover 的元素覆盖 :active 的等效 class

elements specifically for :hover overriding the an equivalent class for :active

html

css

hover

states