在将 .active 状态样式添加到导航栏时遇到问题，尽管 a:hover 是可以的

Question

从图像中可以看出，某些jQuery中使用的活动状态(链接1(将元素更改为"active"存在样式问题。我希望它看起来像链接三中显示的a：hover状态。

以下是链接：

导航栏图像

我所有努力让它(.active state css(看起来像a：hover状态都失败了。有没有人知道如何使.active状态文本与其他链接对齐？

链接 html：

<div class="col-12">
<div class="resources-links make-active" id="resources-nav">
<a id="tab1" class="tab active">link 1</a>
<a id="tab2" class="tab">link 2</a>
<a id="tab3" class="tab">link 3</a>
<a id="tab4" class="tab">link 4</a>
<a id="tab5" class="tab">link 5</a>
<a id="tab6" class="tab">link 6</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i id="resources-nav-chevron" class="fa fa-chevron-down"></i>
</a>
</div>
</div>

.CSS：

.use-case-nav-bk {    
background-color: #F9FAFA;
}
/*
#use-cases-nav .resources-nav {
height: 71px;
}
*/    
#use-cases-nav .resources-links {
overflow: hidden;
background-color: #F9FAFA;
width: 96%;
padding-left: 40px;
margin: 0 auto;
}
#use-cases-nav .resources-links a {
float: left;
display: block;
color: #9b9999;
text-align: center;
padding: 28px 18px;
text-decoration: none;
font-family: Gilroy-Extrabold, sans-serif;
font-size: 16px;
}
#use-cases-nav .resources-links a:hover {
background-color: #B5B5B5;
color: #fff;
border-radius: 10px;
height: 10px;
padding-top: 8px;
padding-bottom: 42px;
margin-top:20px;
}
.resources-links .active  {   
color: #2359B9 !important;
background-color: #B5B5B5;    
border-radius: 10px;
height: 10px;
padding-top: 8px;
padding-bottom: 42px;
margin-top:20px;
}
#use-cases-nav .resources-links .icon {
display: none;
}

Jquery：

$(document).ready(function(){
$('.make-active a').click(function(event){
$('.active').removeClass('active');
$(this).addClass('active');
event.preventDefault();
});
});

JSFIddle： https://jsfiddle.net/webbtrad/ek93L5rn/1/

Answer 1

您的问题是.active类选择器的特殊性

您正在使用

.resources-links .active 

但针对所有a标签

#use-cases-nav .resources-links a

由于该领先#use-cases-nav，它具有更高的特异性 - 因此您绑定到覆盖的padding属性不会被覆盖。

不过，a:hover选择器的填充属性将被覆盖，因为它确实具有更高的特异性。

#use-cases-nav .resources-links a:hover

这就是为什么两者不匹配的原因，尽管具有相同的 CSS。

您的解决方案很简单，只需将#use-cases-nav放入.active选择器中：

#use-cases-nav .resources-links .active