Question

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

我正在尝试使用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

The .icon-reject-hover-fill:hover selector is stronger than .icon-reject-hover-fill. If .icon-reject-hover-fill has CSS properties you don't want when the element is hovered, just specify the desired value inside .icon-reject-hover-fill:hover{}, in your custom CSS.

However, instead of adding a class that has properties you want to unset, just create another class, of your own, that contains only the stuff you want from the class you are importing. Trying to unset properties that have been set is the fastest path to CSS mess-up, quickly escalating into code that is almost impossible to maintain.

The usual way to reset an already set property in CSS is {property-name: initial;}. Please note that not all CSS properties can take initial as value.

在悬停

1 个答案: