Удалите некоторый базовый класс CSS при зависании

Question

У меня есть 2 значка - заполненный превью (отклонение) и незаполненные большие пальцы (одобрение). Мне нужно иметь как палец вверх, так и вниз изображение, которое заполняется при наведении.

Я пытаюсь использовать флип-CSS FontAwesome для достижения этого. Сами значки - из значка, сгенерированного с помощью ico-moon, и относятся к классам .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 (хотя он должен работать с Sencha's SASS в ExtJS 6).

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.