Возникли проблемы при добавлении стиля .active state в панель навигации, хотя: hover в порядке

Question

Как видно из изображения, активное состояние (ссылка 1), используемое в некоторых jQuery для изменения элемента на «активный», имеет проблемы с оформлением. Мне бы хотелось, чтобы это выглядело как состояние a: hover, показанное на третьей ссылке.

Вот ссылки:

изображение навигационной панели

Все мои попытки сделать так, чтобы (активное состояние css) выглядело как состояние a: hover, провалились. У кого-нибудь есть идеи, как сделать так, чтобы текст.активного состояния совпадал с другими ссылками?

Ссылки 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