ホバリングの基本クラス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; 
} 

私の問題は、.icon-reject-hover-fill:hoverはまだ.icon-reject-hover-fill基底クラスに起因する.fa-flip-vertical;を反転さreject-hover-fill場合のために。

から無駄な余分なフリップを継承しないようにするには、.icon-reject-hover-fill:hoverが必要です。私は反転したアイコンを使ってフォントを再作成する必要なくこれを達成する方法があると思いますか？私はIE 8に対応するために必要で、基本的なCSSでもSASSでもかまいません（ただし、SenchaのExtJS 6のSASSの味で動作する必要があります）。

Answer 1

.icon-reject-hover-fill:hoverセレクタが.icon-reject-hover-fillより強いです。要素がホバリングされているときに、.icon-reject-hover-fillにCSSプロパティがない場合は、カスタムCSSの.icon-reject-hover-fill:hover{}の中に目的の値を指定します。

ただし、設定を解除するプロパティを持つクラスを追加する代わりに、インポートするクラスから必要なものだけを含む別のクラスを作成してください。設定されているプロパティの設定を解除しようとすると、CSSがうまくいきません。コードをすぐにエスカレートして維持することはほとんど不可能です。

CSSで既に設定されているプロパティをリセットする通常の方法は、{property-name: initial;}です。すべてのCSSプロパティが値としてinitialを取るわけではないことに注意してください。