Jquery 引导更改导航栏中悬停时i类的颜色？

我在互联网上搜索一些想法，发现：

在这里您可以看到一个带有导航的侧栏。如果你在上面盘旋。您可以在屏幕上看到指定的颜色。现在我想知道他们是怎么做到的。我试过这个：

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

但这似乎不起作用

编辑：

HTML代码（很抱歉没有包括）：

编辑2： 大多数人不理解这个问题，所以让我用另一种方式来解释。 例如，我们在此页面上使用导航栏：

现在我想要的是，当我悬停时，会发生这种情况：

---

就像在这个网站上一样：

如果您使用调试器检查侧栏，您会看到每个列表项元素下面都有一个彩色的范围，其左属性设置为-47px，使其隐藏。该范围还有一个CSS转换属性，当用户将鼠标悬停在链接上时，该属性将被激活。当这种情况发生时，跨度的左属性将转换为0，从而创建所需的效果

这是应该让你走上正轨的方法。我只是在胡闹，想把它弄对，所以可能有一些无关的事情，你不需要完成这项工作，但它应该会给你一个想法。希望这对你有所帮助。如果你还有其他问题，请告诉我

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>

---

你能显示完整的代码吗？html一个？它现在被淹没了@Caiokawasaka你也能包括css吗？这是完整的css atm。第一行代码。另一个css是basic bootstrap.css，这是一个巨大的文档@Caiokawasakiar你用bootstrap的覆盖你的css了吗？你能摆弄一下这个吗？你能摆弄一下这个吗？

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

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