如何更改悬停CSS上的图标

Question

So I have a default icon and I want it to be able to light up active on hover. For some reason I cannot get this to work, and i'd like to use css if possible. thx

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
    }
}

Answer 1

You aren't applying your styles on :hover

https://developer.mozilla.org/en-US/docs/Web/CSS/%3Ahover

i.fu.fu-parents:hover {
  background: image_url("icons/navigation/active/parents-active.svg");
}

Do that and you should get the desired behavior.

Also do yourself a favor and learn some more about HTML/CSS. You should not be using a <ul> for a nav and you have way more classnames than necessary. These things will make your site more difficult to maintain and require additional work such as your role=presentation to support screen readers. Here is an online course that's free and will teach you solid basics: https://dash.generalassemb.ly/

Answer 2

I think you are going for an effect like this JSFiddle ?

a {color: red;}
ul{list-style-type: none;}
a:hover > i {color: blue;}

Answer 3

I couldnt figure it out with css, I know there is a way but I used jquery instead. Because my images had two classes, one default and one active. thx

$("i").hover(
  function () {
    $(this).addClass('active');
  }, 
  function () {
    $(this).removeClass('active');
  }
  );