css - 覆盖 CSS 规则类：悬停以使用类中的原始规则值

Question

是否可以取消带有悬停规则的类，以便该规则使用该类中的值而没有悬停？

在这个人为的示例中，我的项目有一个来自我导入的库的样式表：

/* library.css */
.listItem {
  border-width: 2px;
  border-style: solid;
  border-color: green;
}

.listItem:hover {
  border-color: blue;
}

在我的应用程序中，我不希望边框颜色在悬停时改变。我希望边框颜色保持不变。

/* custom.css */
.listItem:hover {
 border-color: /* whatever value border-color is set to in .listItem */  
}

我知道我可以border-color在 custom.css 示例中明确设置为绿色，但我想知道是否有更动态的解决方案。我怀疑没有。

谢谢！

标签： css

Answer 1

如果您使用!important, 它将覆盖除 Javascript 样式之外的所有内容。

这是您的原始示例：

.listItem {
  border-width: 2px;
  border-style: solid;
  border-color: green;
}

.listItem:hover {
  border-color: blue;
}

#div {
  width: 100px;
  height: 100px;
}

<div class = "listItem" id = "div"></div>

这是它!important：

.listItem {
  border-width: 2px;
  border-style: solid;
  border-color: green !important;
}

.listItem:hover {
  border-color: blue;
}

#div {
  width: 100px;
  height: 100px;
}

<div class = "listItem" id = "div"></div>