Bootstrap changing the color of i class on hover in navbar?

Question

I was searching on the internet for some ideas, and came across this: http://iarouse.com/dist-flatify/v1.1/index.html#/dashboard

Here you see an sidebar with navigation. And if you hover over it. You can see an specified color over the . Now I wonder how they did this. I tried this:

li:hover > i {
    background-color: green;
}

But that didn't seem to work.

EDIT:

HTML code (sorry for not including):

<ul class="sidebar-menu">
                    <li class="active">
                        <a href="index.html">
                            <i class="fa fa-dashboard"></i> <span>Dashboard</span>
                        </a>
                    </li>
                    <li>
                        <a href="widgets.html">
                            <i class="fa fa-th"></i> <span>Widgets</span> <small class="badge pull-right bg-green">new</small>
                        </a>
                    </li>
                    <li class="treeview">
                        <a href="#">
                            <i class="fa fa-bar-chart-o"></i>
                            <span>Charts</span>
                            <i class="fa fa-angle-left pull-right"></i>
                        </a>
                        <ul class="treeview-menu">
                            <li><a href="charts/morris.html"><i class="fa fa-angle-double-right"></i> Morris</a></li>
                            <li><a href="charts/flot.html"><i class="fa fa-angle-double-right"></i> Flot</a></li>
                            <li><a href="charts/inline.html"><i class="fa fa-angle-double-right"></i> Inline charts</a></li>
                        </ul>
                    </li>
                    <li class="treeview">
                        <a href="#">
                            <i class="fa fa-laptop"></i>
                            <span>UI Elements</span>
                            <i class="fa fa-angle-left pull-right"></i>
                        </a>

                    <li class="treeview">
                        <a href="#">
                            <i class="fa fa-folder"></i>  Multilevel Menu
                            <i class="fa fa-angle-left pull-right"></i>
                        </a>

                        <ul class="treeview-menu">
                            <li class="treeview">
                                <a href="#">
                                    First level
                                    <i class="fa fa-angle-left pull-right"></i>
                                </a>

                                <ul class="treeview-menu">
                                    <li class="treeview">
                                        <a href="#">
                                            Second level
                                            <i class="fa fa-angle-left pull-right"></i>
                                        </a>

                                        <ul class="treeview-menu">
                                            <li>
                                                <a href="#">Third level</a>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>

EDIT2: most people dont understand the question so let me explain on a other way. For example we use the navbar on this page: http://almsaeedstudio.com/AdminLTE/

Now what I want is when I hover this happens: http://prntscr.com/5526kp

Just like on this website: http://iarouse.com/dist-flatify/v1.1/index.html#/dashboard

Answer 1

If you use your debugger to inspect the sidebar, you'll see that underneath each list item element is a colored span with its left property set to -47px, making it hidden. That span also has a CSS transition property which is activated when the user hovers over the link. When that happens, the span's left property transitions to 0, creating the effect you are looking for.

Here's a fiddle of the general idea that should get you started down the right track. I was fooling around with it trying to get it right so there's probably some extraneous you don't need to get the job done, but it should give you an idea. Hope you find this helpful. Let me know if you have any other questions.

The HTML:

<aside id="nav-container">
    <div id="nav-wrapper">
        <ul class="sidebar-menu">
            <li class="active list_item">
                <a href="index.html" class="list_anchor">
                    <i class="fa fa-dashboard fontawesome_icon">
                        <span class="icon-bg orange"></span>
                    </i>
                    <span class="menu_text">Dashboard</span>
                </a>
            </li>
            <li class="list_item">
                <a href="widgets.html" class="list_anchor">
                    <i class="fa fa-th fontawesome_icon">
                        <span class="icon-bg blue"></span>
                    </i>
                    <span class="menu_text">Widgets</span>
                </a>
            </li>
            <li class="treeview list_item">
                <a href="#" class="list_anchor">
                    <i class="fa fa-bar-chart-o fontawesome_icon">
                        <span class="icon-bg green"></span>
                    </i>
                    <span class="menu_text">Charts</span>
                </a>
            </li>
        </ul>                           
    </div>
</aside>

And the CSS:

#nav-container {
    margin-left: -47px;
}

.sidebar-menu, .treeview-menu {
    list-style-type: none;
}

.list_item {
    width: 218px;
    height: 50px;
    position: relative;
    margin: 0;
}

.list_anchor {
    width: 188px;
    height: 19px;
    padding: 15px;
}

.fontawesome_icon {
    width: 49px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    margin: -15, 10, -15, -15;
    position: relative;
    display: block;
    float: left;
    border-right: 1px solid #e5e5e5;
}

.fontawesome_icon:before {
    position: relative;
    z-index: 1;
}

.fa-dashboard {
    line-height: 50px;
    width: 49px;
    text-align: center;
}

.menu_text {
    margin-top: 15px;
    position: absolute;
}

.icon-bg {
    position: absolute;
    width: 50px;
    height: 50px;
    left: -47px;
    transition: left 0.2s ease-in-out 0s;
}

li:hover > a > i .icon-bg {
    left: 0;
}

.menu_text {
    text-align: left;
    line-height: 20px;
    margin: -15, 10, -15, -15;
    list-style-position: outside;
}

.orange {
    background-color: #E2B721;
}

.blue {
    background-color: #1E23EE;
}

.green {
    background-color: #58E91B;
}