我有 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 一起使用)。
最佳答案
.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
作为值。
关于css - 悬停时删除一些基类 CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39249147/