如何在悬停时更改链接周围的背景颜色区域

Question

我在悬停时设置了背景颜色，但它显示在链接上，如图片。

如何正确对齐链接周围的背景颜色？我正在使用高度和宽度，但它改变链接的位置而不是背景颜色。

链接的CSS：

.navbar-custom .navbar-nav > li > a {  
   color : #44546a ;  
   display: inline-block;
   vertical-align : middle ;
   margin-top : 20px ;
   padding-bottom : 0px;
   font-weight : bold ;               
}

.navbar-custom .navbar-nav > li:hover > a {
   background-color : #00a0b7 ;
   color :    white   ;
   height : ?????? ;
   width  : ??????? ;
}

Answer 1

使用bootstrap你可以做到这一点

.navbar-custom .navbar-nav > li > a {  
color : #44546a ;  
display: inline-block;
vertical-align : middle ;
font-weight : bold ;
}

.navbar-custom .navbar-nav > li:hover > a{
background-color : #00a0b7 ;
color :    white   ;
}

示例：https://jsfiddle.net/SeniorFront/DTcHh/30060/

Answer 2

尝试使用您需要的内容

.navbar ul li {  
color : #44546a ;  
display: inline-block;
font-weight : bold ;
}
.navbar ul li a{
padding:5px;
}
.navbar ul li::after{
content:'|';
}

.navbar ul li a:hover{
background-color:#0095ff;
text-decoration:none;
color:white;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="navbar">
<ul>
<li><a>Home</a></li>
<li><a>Company</a></li>
</ul>
</div>

Answer 3

linkClass {color：red;} linkClass：悬停{颜色：蓝;}

  

<a href='' class='linkClass'>Sample link</a>