Issue
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 class="wrapper">
<div class="sidebar">
<ul class="side">
<li><a href="#"> <i class="bi bi-columns-gap fa-lg icon-red"></i> </a>Dashboard</li>
<li><a href="#"> <i class="bi bi-graph-up-arrow"></i> </a>Reporting</li>
<li><a href="#"> <i class="bi bi-send-check"></i> </a>Sending</li>
<li><a href="#"> <i class="bi bi-envelope"></i> </a>Recieving</li>
<li><a href="#"> <i class="bi bi-person-check"></i> </a>Verification</li>
</ul>
</div>
</div>
Solution
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 class="wrapper">
<div class="sidebar">
<ul class="side">
<li><a href="#"> <i class="bi bi-columns-gap fa-lg icon-red icon"></i></a>Dashboard</li> <!-- Extra class 'icon'-->
<li><a href="#"> <i class="bi bi-graph-up-arrow icon"></i> </a>Reporting</li>
<li><a href="#"> <i class="bi bi-send-check icon"></i> </a>Sending</li>
<li><a href="#"> <i class="bi bi-envelope icon"></i> </a>Recieving</li>
<li><a href="#"> <i class="bi bi-person-check icon"></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.
Answered By - Ansh
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.