I am trying to apply hover property on li element of sidebar, its working but icon tag is not showing hover effect. I want icon to show hover effect along with li's hover effect. Below is the code:

.wrapper {
    display: flex;
    position: relative;    
}

.wrapper .sidebar{

    position: fixed;
    width: 200px;
    background-color: #00B6E1;
    /* padding: 30px 0; */
    height: 100%;
 
}
.wrapper .sidebar ul li{


    padding: 15px;
    border-bottom: 1px solid #064E88;
    /* border-top: 1px solid; */
    /* color: white; */
    font-weight: 400;
}


.wrapper .sidebar ul li a{

    padding: 10px;
}

.wrapper .sidebar ul li:hover{

    background-color: #064E88;
    color: white;
}

<div >
        <div >
            <ul >
                <li><a href="#"> <i ></i> </a>Dashboard</li>
                <li><a href="#"> <i ></i> </a>Reporting</li>
                <li><a href="#"> <i ></i> </a>Sending</li>
                <li><a href="#"> <i ></i> </a>Recieving</li>
                <li><a href="#"> <i ></i> </a>Verification</li>
            </ul>
        </div>
    </div>

CodePudding user response：

You can simply give an extra class to each <i> tag and refer it to CSS with li:hover selector. (I've given icon)

<div >
    <div >
        <ul >
                
            <li><a href="#"> <i ></i></a>Dashboard</li> <!-- Extra class 'icon'-->
            <li><a href="#"> <i ></i> </a>Reporting</li>
            <li><a href="#"> <i ></i> </a>Sending</li>
            <li><a href="#"> <i ></i> </a>Recieving</li>
            <li><a href="#"> <i ></i> </a>Verification</li>
        </ul>
    </div>
</div>

/*Referring the class 'icon' with 'li:hover'*/
.wrapper .sidebar ul li:hover, li:hover .icon{
    background-color: #064E88;
    color: white;
}

li:hover .icon as whole represents the element with class 'icon' inside the hovered 'li' tag. We need to separate it with 'li:hover' so that the effect shows on both the hovered li and <i> tag.