how can i make blue (#007bff) rounded backgrounds of full width on hover?-CodePudding

I want 100% width blue rounded background on hover. I tried various ways but couldn't. Please help me to create a blue (#007bff) rounded background of border radius 10px on hover. Remember on hover it should cover the whole block not only a tag highlight.

Codepen link to my work

.sidebar{
  display: block;
  position: fixed;
  height: 100vh;
  top: 0px;
  left: 0;
  background-color: #fff;
  width: 15.625rem;
  box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.75);
  z-index: 0;
  transition: all 0.5s ease;
}
.open.sidebar {
  display: block;
}
#mySidebar{
  transition:all 0.2s linear;
  /*transform:translateX(-250px);*/
}
#mySidebar.open{
  transform:translateX(0);
}
.sidebar-header{
  width: 100%;
  background: rgba(0, 136,169, 1);
  height: 3rem;
}
.sidebar-header .profile{
  display:  flex;
  color: #fff;
}
.profile .profile-image img{
  flex-wrap: wrap;
  pointer-events: none;
  border-radius: 50%;
  width: 40px;
  float: none;
  display: block;
  object-fit: fill;
  height: 40px;
  margin-left:  20px;
}
.profile .profile-name{
  display: inline-flex;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 2px 0 5px;
  font-size: 14px;
}
.profile .profile-name i{
  margin: -2px 5px 0 2px;
  font-size: 16px;
}
.sidebar-nav{
margin: 0;
}
.sidebar-nav ul{
display:flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
list-style:none;
line-height: 30px;
}
.sidebar-nav ul li{
width:100%;
color:#007bff;
}
.sidebar-nav ul li a{
text-decoration:none;
}
.sidebar-nav ul li a:hover{
background:#007bff;
color: #fff;
}

<div  id='mySidebar'>
    <div >
        <div >
            <div >
                <img src="https://www.directive.com/images/easyblog_shared/July_2018/7-4-18/b2ap3_large_totw_network_profile_400.jpg">
            </div>
            <div >
                <i ></i><span>Umann Goswami</span>
            </div>
        </div>
    </div><!--sidebar-header-->
    <div >
        <ul>
            <li><a href=""><span ><i ></i></span>Home</a></li>
             
             <li><a href=""><span ><i ></i></span>Home</a></li>

             <li><a href=""><span ><i ></i></span>Home</a></li>
             
             <li><a href=""><span ><i ></i></span>Home</a></li>
        </ul>
    </div>
</div><!--sidebar-->

CodePudding user response：

You can add display: block to "a" tags

CodePudding user response：

You are changing the background color of your anchor tag rather than the element this tag is in, so in this case the li (List Item). To have the full background for the link and the list item, you have to move the :hover over to li, or add a chaining rule like this:

.sidebar-nav ul li:hover, .sidebar-nav ul li:hover a {
    background:#007bff;
    color: #fff;
    border-radius: 10px;
}

.sidebar{
    display: block;
    position: fixed;
    height: 100vh;
    top: 0px;
    left: 0;
    background-color: #fff;
    width: 15.625rem;
    box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.75);
    z-index: 0;
    transition: all 0.5s ease;
}
.open.sidebar {
    display: block;
}
#mySidebar{
    transition:all 0.2s linear;
    /*transform:translateX(-250px);*/
}
#mySidebar.open{
    transform:translateX(0);
}
.sidebar-header{
    width: 100%;
    background: rgba(0, 136,169, 1);
    height: 3rem;
}
.sidebar-header .profile{
    display:  flex;
    color: #fff;
}
.profile .profile-image img{
    flex-wrap: wrap;
    pointer-events: none;
    border-radius: 50%;
    width: 40px;
    float: none;
    display: block;
    object-fit: fill;
    height: 40px;
    margin-left:  20px;
}
.profile .profile-name{
    display: inline-flex;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 2px 0 5px;
    font-size: 14px;
}
.profile .profile-name i{
    margin: -2px 5px 0 2px;
    font-size: 16px;
}
.sidebar-nav{
margin: 0;
}
.sidebar-nav ul{
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    list-style:none;
    line-height: 30px;
}
.sidebar-nav ul li{
    width:100%;
    color:#007bff;
}
.sidebar-nav ul li a{
    text-decoration:none;
}
.sidebar-nav ul li:hover, .sidebar-nav ul li:hover a {
    background:#007bff;
    color: #fff;
    border-radius: 10px;
}

<div  id='mySidebar'>
    <div >
        <div >
            <div >
                <img src="https://www.directive.com/images/easyblog_shared/July_2018/7-4-18/b2ap3_large_totw_network_profile_400.jpg">
            </div>
            <div >
                <i ></i><span>Umann Goswami</span>
            </div>
        </div>
    </div><!--sidebar-header-->
    <div >
        <ul>
            <li><a href=""><span ><i ></i></span>Home</a></li>
             
             <li><a href=""><span ><i ></i></span>Home</a></li>

             <li><a href=""><span ><i ></i></span>Home</a></li>
             
             <li><a href=""><span ><i ></i></span>Home</a></li>
        </ul>
    </div>
</div><!--sidebar-->

Extra: Note that your list items, are slightly padded to the right. To fix this, you could add padding: 0 15px; where 15px is padding left and padding right.

.sidebar-nav ul {
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    list-style:none;
    line-height: 30px;
    padding: 0 15px;
}