css - 悬停时删除一些基类 CSS

Question

我有 2 个图标 - 一个填充的拇指向下(拒绝)和一个未填充的拇指向上(批准)。我需要在悬停时填充竖起大拇指和竖起大拇指的图像。

我正在尝试使用 FontAwesome 的翻转 CSS 来实现这一点。图标本身来自使用 ico-moon 生成的 iconfont，并与类 .icon-approve 和 .icon-reject 相关。

.icon-approve-hover-fill {
    @extend .icon-approve;
}
.icon-approve-hover-fill:hover {
    @extend .icon-reject;
    @extend .fa-flip-vertical;
}
.icon-reject-hover-fill {
    @extend .icon-approve;
    @extend .fa-flip-vertical;
}

.icon-reject-hover-fill:hover {
    @extend .icon-reject;
}

我的问题是，对于 reject-hover-fill 情况，.icon-reject-hover-fill:hover 由于 仍在翻转.fa-flip-vertical; 在 .icon-reject-hover-fill 基类中。

我需要 .icon-reject-hover-fill:hover 来有效地成为它自己的类，而不是从 .icon-reject-hover-fill 继承无用的额外翻转>。我假设有一种方法可以实现这一点，而不需要我用翻转的图标重新创建我的字体？我需要它适用于 IE 8，并且可以是基本的 CSS 或 SASS(尽管它需要在 ExtJS 6 中与 Sencha 风格的 SASS 一起使用)。

Answer 1

.icon-reject-hover-fill:hover 选择器比 .icon-reject-hover-fill 更强大。如果 .icon-reject-hover-fill 有元素悬停时不需要的 CSS 属性，只需在 .icon-reject-hover-fill:hover{ }，在您的自定义 CSS 中。

但是，不是添加一个具有您想要取消设置的属性的类，而是创建另一个您自己的类，它只包含您想要从您正在导入的类中获取的内容。尝试取消设置已设置的属性是导致 CSS 困惑的最快途径，它会迅速升级为几乎无法维护的代码。

在 CSS 中重置已设置属性的常用方法是 {property-name: initial;}。请注意，并非所有 CSS 属性都可以将 initial 作为值。