移除一些懸停的基類CSS

我有2個圖標 - 一個填充的大拇指向下（拒絕）和一個未填充的大拇指（批准）。我需要有一個豎起大拇指向上和向下的圖像，填滿懸停。移除一些懸停的基類CSS

我想使用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仍然在.icon-reject-hover-fill基類翻轉由於.fa-flip-vertical;。

我需要.icon-reject-hover-fill:hover有效地成爲它自己的類，而不是從.icon-reject-hover-fill繼承無用的額外翻轉。我假設有一種方法可以實現這一點，而不需要使用翻轉圖標重新創建我的字體？我需要將它應用到IE 8，可以是基本的CSS或SASS（儘管它需要在ExtJS 6中使用Sencha的SASS風格）。

來源

2016-08-31 Matt Allwood

.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作爲值。

來源

2016-08-31 12:16:49

並非如此，我不想從.fa-flip-vertical中得到所有東西，這只是我想要的.some-icon-class而不是.some-icon-class：hover。在我上面的代碼中，當鼠標懸停在一個拒絕上時，我仍然會出現.fa-flip-vertical，因爲：hover類沒有刪除它。不太理智的選擇2似乎工作確定，所以我會堅持。這只是一個似乎支持初始化的轉換調用。 –

移除一些懸停的基類CSS

回答

相關問題