我有一个 hover 问题（边框没有填满整个列表项）

Question

I've already created my own navigation bar (vertically) things look fne actually, however, when I've tried the hovering. As you see, my hovering doesn't look very nice, what I've expected is that when I hover on the element it should vorder neatly as if it hasn't been hovered (you can see that in the first place). I've added white border just to show my expectation when the element is hovered, and indeed it shoudn't been shown in the first place unless you hover. Can anyone fix this error to me please? Thanks a million!!!

 #navbar{ position: fixed; width: 100%; top:0px; left:0; height: 100%; border-right: solid; border-color:rgba(0,22,22,0.4); background-image: radial-gradient( rgb(0,55,17),rgb(2,83,30)); display:block; } #navbar #vertical-functions { width:100%; overflow-y: auto; overflow-x: hidden; height:70%; } #navbar #vertical-functions li{ padding-top: 15px; list-style: none; width: 100%; color: #FFF; background-color: transparent; margin: 1% 0; }.list-item.fa-stack{ font-size: 70%; } #navbar #vertical-functions li span.list-item { padding: 10px 0 10px 20px; display: flex; margin: 0 4%; align-items: center; justify-content: space-between; border: 1px solid #eee; }.list-item:hover { border: 2px solid yellow; }.sub-list{padding: 0px 0 0 40px;}

 <nav id="navbar"> <ul id="vertical-functions"> <li onclick="toggleNavBar"> <span class="list-item"> <span class="list-item-label-info"><i class="fa fa-home" aria-hidden="true"></i>Trang chủ... </span> <span class="fa-stack"> <i class="fa fa-chevron-left fa-stack-1x"></i> </span> </span> </li> <li onclick="toggleNavBar"> <span class="list-item"> <span class="list-item-label-info"><i class="fa fa-home" aria-hidden="true"></i>Tra cứu và thống kê... </span> <span class="fa-stack"> <i class="fa fa-chevron-left fa-stack-1x"></i> </span> </span> <ul class="sub-list"> <li onclick="toggleNavBar"> <span class="list-item"> <span class="list-item-label-info"><i class="fa fa-home" aria-hidden="true"></i>Tra cứu và thống kê... </span> </span> </li> <li> <span class="list-item"> <span class="list-item-label-info"><i class="fa fa-home" aria-hidden="true"></i>Tra cứu và thống kê... </span> </span> </li> </ul> </li> <li onclick="toggleNavBar"> <span class="list-item"> <span class="list-item-label-info"><i class="fa fa-home" aria-hidden="true"></i>Tra cứu và thống kê... </span> <span class="fa-stack"> <i class="fa fa-chevron-left fa-stack-1x"></i> </span> </span> <ul class="sub-list"> <li onclick="toggleNavBar"> <span class="list-item"> <span class="list-item-label-info"><i class="fa fa-cc-mastercard" aria-hidden="true"></i>Liên kết thẻ ngân hàng </span> </span> </li> <li onclick="toggleNavBar"> <span class="list-item"> <span class="list-item-label-info"><i class="fa fa-money" aria-hidden="true"></i>Nạp tiền/Rút tiền </span> </span> </li> <li onclick="toggleNavBar"> <span class="list-item"> <span class="list-item-label-info"><i class="fa fa-exchange" aria-hidden="true"></i>Chuyển khoản </span> </span> </li> <li> <span class="list-item"> <span class="list-item-label-info"><i class="fa fa-cart-arrow-down" aria-hidden="true"></i>Tích hợp thanh toán </span> </span> </li> </ul> </li> <li onclick="toggleNavBar"> <span class="list-item"> <span class="list-item-label-info"><i class="fa fa-wrench" aria-hidden="true"></i>Cài đặt </span> <span class="fa-stack"> <i class="fa fa-chevron-left fa-stack-1x"></i> </span> </span> <ul class="sub-list"> <li onclick="toggleNavBar"> <span class="list-item"> <span class="list-item-label-info"><i class="fa fa-bell" aria-hidden="true"></i>Thông báo nhận tin </span> </span> </li> <li onclick="toggleNavBar"> <span class="list-item"> <span class="list-item-label-info"><i class="fa fa-key" aria-hidden="true"></i>Bảo mật thông tin </span> </span> </li> <li> <span class="list-item"> <span class="list-item-label-info"><i class="fa fa-laptop" aria-hidden="true"></i>Giao diện </span> </span> </li> </ul> </li> </ul> </nav>

effect things turn much that I've not expected.

Answer 1

Replace.list-item:hover style with this code:

#navbar #vertical-functions li span.list-item:hover {
    border: 2px solid yellow;
}

Answer 2

The issue arises with the space before :hover it is selecting a hovered child of the span.list-item

 #navbar { position: fixed; width: 100%; top: 0px; left: 0; height: 100%; border-right: solid; border-color: rgba(0, 22, 22, 0.4); background-image: radial-gradient( rgb(0, 55, 17), rgb(2, 83, 30)); display: block; } #navbar #vertical-functions { width: 100%; overflow-y: auto; overflow-x: hidden; height: 70%; } #navbar #vertical-functions li { padding-top: 15px; list-style: none; width: 100%; color: #FFF; background-color: transparent; margin: 1% 0; }.list-item.fa-stack { font-size: 70%; } #navbar #vertical-functions li span.list-item { padding: 10px 0 10px 20px; display: flex; margin: 0 4%; align-items: center; justify-content: space-between; border: 1px solid transparent; } #navbar #vertical-functions li span.list-item:hover { border: 1px solid #eee; }.sub-list { padding: 0px 0 0 40px; }

 <nav id="navbar"> <ul id="vertical-functions"> <li onclick="toggleNavBar"> <span class="list-item"> <span class="list-item-label-info"><i class="fa fa-home" aria-hidden="true"></i>Trang chủ... </span> <span class="fa-stack"> <i class="fa fa-chevron-left fa-stack-1x"></i> </span> </span> </li> <li onclick="toggleNavBar"> <span class="list-item"> <span class="list-item-label-info"><i class="fa fa-home" aria-hidden="true"></i>Tra cứu và thống kê... </span> <span class="fa-stack"> <i class="fa fa-chevron-left fa-stack-1x"></i> </span> </span> <ul class="sub-list"> <li onclick="toggleNavBar"> <span class="list-item"> <span class="list-item-label-info"><i class="fa fa-home" aria-hidden="true"></i>Tra cứu và thống kê... </span> </span> </li> <li> <span class="list-item"> <span class="list-item-label-info"><i class="fa fa-home" aria-hidden="true"></i>Tra cứu và thống kê... </span> </span> </li> </ul> </li> <li onclick="toggleNavBar"> <span class="list-item"> <span class="list-item-label-info"><i class="fa fa-home" aria-hidden="true"></i>Tra cứu và thống kê... </span> <span class="fa-stack"> <i class="fa fa-chevron-left fa-stack-1x"></i> </span> </span> <ul class="sub-list"> <li onclick="toggleNavBar"> <span class="list-item"> <span class="list-item-label-info"><i class="fa fa-cc-mastercard" aria-hidden="true"></i>Liên kết thẻ ngân hàng </span> </span> </li> <li onclick="toggleNavBar"> <span class="list-item"> <span class="list-item-label-info"><i class="fa fa-money" aria-hidden="true"></i>Nạp tiền/Rút tiền </span> </span> </li> <li onclick="toggleNavBar"> <span class="list-item"> <span class="list-item-label-info"><i class="fa fa-exchange" aria-hidden="true"></i>Chuyển khoản </span> </span> </li> <li> <span class="list-item"> <span class="list-item-label-info"><i class="fa fa-cart-arrow-down" aria-hidden="true"></i>Tích hợp thanh toán </span> </span> </li> </ul> </li> <li onclick="toggleNavBar"> <span class="list-item"> <span class="list-item-label-info"><i class="fa fa-wrench" aria-hidden="true"></i>Cài đặt </span> <span class="fa-stack"> <i class="fa fa-chevron-left fa-stack-1x"></i> </span> </span> <ul class="sub-list"> <li onclick="toggleNavBar"> <span class="list-item"> <span class="list-item-label-info"><i class="fa fa-bell" aria-hidden="true"></i>Thông báo nhận tin </span> </span> </li> <li onclick="toggleNavBar"> <span class="list-item"> <span class="list-item-label-info"><i class="fa fa-key" aria-hidden="true"></i>Bảo mật thông tin </span> </span> </li> <li> <span class="list-item"> <span class="list-item-label-info"><i class="fa fa-laptop" aria-hidden="true"></i>Giao diện </span> </span> </li> </ul> </li> </ul> </nav>

Answer 3

Live example:

 #navbar { position: fixed; width: 100%; top: 0px; left: 0; height: 100%; border-right: solid; border-color: rgba(0, 22, 22, 0.4); background-image: radial-gradient( rgb(0, 55, 17), rgb(2, 83, 30)); display: block; } #navbar #vertical-functions { width: 100%; overflow-y: auto; overflow-x: hidden; height: 70%; } #navbar #vertical-functions li { padding-top: 15px; list-style: none; width: 100%; color: #FFF; background-color: transparent; margin: 1% 0; }.list-item.fa-stack { font-size: 70%; } #navbar #vertical-functions li span.list-item { padding: 10px 0 10px 20px; display: flex; margin: 0 4%; align-items: center; justify-content: space-between; border: 1px solid #eee; } #navbar #vertical-functions li span.list-item:hover { padding: 10px 0 10px 20px; display: flex; margin: 0 4%; align-items: center; justify-content: space-between; border: 2px solid yellow; }.sub-list { padding: 0px 0 0 40px; }

 <nav id="navbar"> <ul id="vertical-functions"> <li onclick="toggleNavBar"> <span class="list-item"> <span class="list-item-label-info"> <i class="fa fa-home" aria-hidden="true"></i> Trang chủ... </span> <span class="fa-stack"> <i class="fa fa-chevron-left fa-stack-1x"></i> </span> </span> </li> <li onclick="toggleNavBar"> <span class="list-item"> <span class="list-item-label-info"> <i class="fa fa-home" aria-hidden="true"></i> Tra cứu và thống kê... </span> <span class="fa-stack"> <i class="fa fa-chevron-left fa-stack-1x"></i> </span> </span> <ul class="sub-list"> <li onclick="toggleNavBar"> <span class="list-item"> <span class="list-item-label-info"> <i class="fa fa-home" aria-hidden="true"></i> Tra cứu và thống kê... </span> </span> </li> <li> <span class="list-item"> <span class="list-item-label-info"> <i class="fa fa-home" aria-hidden="true"></i> Tra cứu và thống kê... </span> </span> </li> </ul> </li> <li onclick="toggleNavBar"> <span class="list-item"> <span class="list-item-label-info"> <i class="fa fa-home" aria-hidden="true"></i> Tra cứu và thống kê... </span> <span class="fa-stack"> <i class="fa fa-chevron-left fa-stack-1x"></i> </span> </span> <ul class="sub-list"> <li onclick="toggleNavBar"> <span class="list-item"> <span class="list-item-label-info"> <i class="fa fa-cc-mastercard" aria-hidden="true"></i> Liên kết thẻ ngân hàng </span> </span> </li> <li onclick="toggleNavBar"> <span class="list-item"> <span class="list-item-label-info"> <i class="fa fa-money" aria-hidden="true"></i> Nạp tiền/Rút tiền </span> </span> </li> <li onclick="toggleNavBar"> <span class="list-item"> <span class="list-item-label-info"> <i class="fa fa-exchange" aria-hidden="true"></i> Chuyển khoản </span> </span> </li> <li> <span class="list-item"> <span class="list-item-label-info"> <i class="fa fa-cart-arrow-down" aria-hidden="true"></i> Tích hợp thanh toán </span> </span> </li> </ul> </li> <li onclick="toggleNavBar"> <span class="list-item"> <span class="list-item-label-info"> <i class="fa fa-wrench" aria-hidden="true"></i> Cài đặt </span> <span class="fa-stack"> <i class="fa fa-chevron-left fa-stack-1x"></i> </span> </span> <ul class="sub-list"> <li onclick="toggleNavBar"> <span class="list-item"> <span class="list-item-label-info"> <i class="fa fa-bell" aria-hidden="true"></i> Thông báo nhận tin </span> </span> </li> <li onclick="toggleNavBar"> <span class="list-item"> <span class="list-item-label-info"> <i class="fa fa-key" aria-hidden="true"></i> Bảo mật thông tin </span> </span> </li> <li> <span class="list-item"> <span class="list-item-label-info"> <i class="fa fa-laptop" aria-hidden="true"></i> Giao diện </span> </span> </li> </ul> </li> </ul> </nav>