专门用于以下内容的元素：将鼠标悬停覆盖以下等效类：active [英] elements specifically for :hover overriding the an equivalent class for :active

问题描述

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

HTML：

 < div class =backgroundRed backgroundGreenHover backgroundBlueActivestyle =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;} 
  

解决方案

：active 伪类应该在：hover 之后，否则：hover 覆盖（与链接有关的伪分类的顺序为：：link |：visited |：hover |：active 。） 。你编写的代码如预期的那样工作，但是如果你改变这些类，那么：active 伪类永远不会适用。

<背景：红色;}。backgroundGreen，.backgroundGreenHover：hover，.backgroundRedHover：hover，.backgroundRedActive：active {background：red;}。backgroundGreen，.backgroundGreenHover：hover， .backgroundGreenActive：active {background：green;}。backgroundBlue，.backgroundBlueHover：hover，.backgroundBlueActive：active {background：blue;}

 < div class =backgroundRed backgroundBlueHover backgroundGreenActivestyle =width：100px; height：100px;>< / div> 来重新排序类：active 在：hover 后工作正常。
 
 
 
 
 
 
  .backgroundRed，.backgroundRedHover：hover {background：red;}。backgroundGreen ，backgroundbackgroundGreenHover：hover {background：green;}。backgroundBlueActive：active {background; backgroundBlueActive：active {background; green;}。backgroundBlueActive：active {background; backgroundBlueActive：active {background; background：green;}。backgroundBlueActive：active {background ：blue;}  

 < div class =backgroundRed backgroundBlueHover backgroundGreenActivestyle =width：100px; height：100px;>< / div>  

I have code to have a background with a font color assigned with one class then have separate classes for changing the color on :hover or :active but the :active state does not trigger unless I remove the :hover specific 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;}

解决方案

:active pseudo-class should go after :hover, otherwise the :hover overwrites (The order for the link-relates pseudo-clasess is: :link | :visited | :hover | :active.). You code example works as expected but if you change the classes the :active pseudo-class never applies.

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

You need more CSS lines but reordering the classes with :active after the :hover works fine.

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

这篇关于专门用于以下内容的元素：将鼠标悬停覆盖以下等效类：active的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！