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

悬停时我已设置背景颜色，但它显示在链接上，如图：。如何更改悬停时链接背景颜色的区域

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

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

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

回答

相关问题