引導程序更改導航欄上懸停時i類的顏色？

Question

我在互聯網上搜索一些想法，並偶然發現： http : //iarouse.com/dist-flatify/v1.1/index.html#/dashboard

在這里，您會看到帶有導航的側欄。 如果將鼠標懸停在它上面。 您可以在上看到指定的顏色。 現在我想知道他們是如何做到的。 我嘗試了這個：

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

但這似乎沒有用。

編輯：

HTML代碼（不包括在內）：

<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：大多數人不理解這個問題，所以讓我用另一種方式解釋。 例如，我們在此頁面上使用導航欄： http : //almsaeedstudio.com/AdminLTE/

現在，我要的是懸停時發生這種情況： http : //prntscr.com/5526kp

就像在此網站上一樣： http : //iarouse.com/dist-flatify/v1.1/index.html#/dashboard

Answer 1

如果使用調試器檢查側欄，則會看到每個列表項元素下面是一個彩色的跨度，其left屬性設置為-47px，使其隱藏。 該范圍還具有CSS過渡屬性，當用戶將鼠標懸停在鏈接上時會激活該屬性。 發生這種情況時，跨度的left屬性會轉換為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>

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