提问者:小点点

重写CSS规则类:悬停以使用类中的原始规则值


有没有可能取消一个带有悬停规则的类,从而使规则使用没有悬停的类中的值?

在这个设计好的示例中,我的项目有一个样式表,它来自我导入的库:

/* 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 */  
}

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

谢谢!


共1个答案

匿名用户

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

以下是您的原始示例:

null

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