I'm trying to make a default icon light up on hover using CSS, but I'm having trouble getting it to work. Any suggestions on how I can achieve this effect? Thank you!
HTML
<ul class='nav nav-main nav-sidebar'>
<li role='presentation'>
<a href='javascript:void(0)'>
<i class='pull-left fu fu-lg fu-parents'></i>
Parents
</a>
CSS
li {
.hidden-on-hover {
display: inherit;
}
.visible-on-hover {
display: none;
}
}
li:hover {
.hidden-on-hover {
display: none;
}
.visible-on-hover {
display: inherit;
}
i.fu.fu-parents {
background: image_url("icons/navigation/default/parents.svg") center center no-repeat;
background-size: contain
}
i.fu.fu-parents.active {
background: image_url("icons/navigation/active/parents-active.svg") center center no-repeat;
background-size: contain
}
}