如何更改懸停時鏈接背景顏色的區域

懸停時我已設置背景顏色，但它顯示在鏈接上，如圖：。如何更改懸停時鏈接背景顏色的區域

如何正確對齊鏈接背景顏色？我正在使用高度和寬度，但它改變鏈接的位置，而不是背景顏色。

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 : ??????? ; 
}

來源

2017-02-21 speedyraz

有明顯出錯了'墊襯/ margins'。請發佈所有的'navbar css代碼'，以便我們看到你的錯在哪裏 –

看看這個[https://css-tricks.com/keep-margins-out-of-link-lists/](https:css- tricks.com/keep-margins-out-of-link-lists/） –

自舉你可以做到這一點

.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/

來源

2017-02-21 11:20:21

與您需要

.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>

內容試試這個

來源

2017-02-21 11:34:08

linkClass {顏色：紅色;} linkClass：懸停{顏色：藍色;}

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

來源

2017-02-21 11:49:45

如何更改懸停時鏈接背景顏色的區域

回答

相關問題