Matt Allwood Matt Allwood - 3 months ago 11
Sass (Sass) Question

Remove some base class CSS on hover

I have 2 icons - a filled thumbs-down (reject) and an unfilled thumbs-up (approve). I need to have both a thumbs up and down image which fills in on hover.

I am trying to use FontAwesome's flip CSS to achieve this. The icons themselves are from an iconfont generated using ico-moon and relate to classes .icon-approve and .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;
}


My issue is that for the
reject-hover-fill
case that the
.icon-reject-hover-fill:hover
is still flipping due to the
.fa-flip-vertical;
in the
.icon-reject-hover-fill
base class.

I need
.icon-reject-hover-fill:hover
to effectively be it's own class and not inherit the useless extra flip from
.icon-reject-hover-fill
. I assume there's a way to achieve this without me needing to re-create my font with flipped icons? I need it to work down to IE 8 and can be either basic CSS or SASS (though it needs to work with Sencha's flavour of SASS in ExtJS 6).

Answer

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.

Comments