ホバー上のリンクの周りの背景色の領域を変更する方法

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

あなたが例

.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 {色：赤;} なります。linkClass：ホバー{色：青;}

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