user6408005 user6408005 - 6 months ago 23
CSS Question

color box hover css html

i try to apply hover on box .. means when i drag mouse over menu items then background color must be change so for that i try this code please check

i try this



body {
background-color: black;
}
.lefttabs a {
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
font-size: medium;
color: White;
width: 133px;
margin-left: 0px;
}
.lefttabs ul {
list-style: none;
margin: 0px 20px 0px 0px;
}
.lefttabs li {
list-style: none;
padding: 0px 0px 30px 0px;
}
.lefttabs li a {
list-style: none;
display: block;
}
.lefttabs a:hover,
.offcanvas a:focus {
color: green;
background-color: White;
border-color: Yellow;
color: #000!important;
height: 20%;
width: 10px;
}

<div class="lefttabs" style="width: 187px; height: 422px;">
<ul>
<li>
<a>DASHBOARD</a>

</li>
<li>
<a> EVENTS</a>
</li>
</ul>
</div>





image

In the above image i hover box but this not completely fill whereas i draw box with white color so i want to fill that box through hover
any solution?

Answer

You have to display your padding to your a tag and not to your li tag.

.lefttabs li
{
   list-style:none;
}

.lefttabs li  a 
{
    list-style:none;
    display:block;
    padding: 0px 0px 30px 0px;
}