如何更改悬停时链接背景颜色的区域
问题描述:
悬停时我已设置背景颜色,但它显示在链接上,如图:。如何更改悬停时链接背景颜色的区域
如何正确对齐链接背景颜色?我正在使用高度和宽度,但它改变链接的位置,而不是背景颜色。
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 : ??????? ;
}
答
自举你可以做到这一点
.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 ;
}
答
内容试试这个
与您需要
.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>
答
linkClass {颜色:红色;} linkClass:悬停{颜色:蓝色;}
<a href='' class='linkClass'>Sample link</a>
有明显出错了'垫衬/ margins'。请发布所有的'navbar css代码',以便我们看到你的错在哪里 –
看看这个[https://css-tricks.com/keep-margins-out-of-link-lists/](https:css- tricks.com/keep-margins-out-of-link-lists/) –