Question

从图像中可以看到，某些jQuery中用于将元素更改为“活动”的活动状态（链接1）存在样式问题。我希望它看起来像链接三所示的a：hover状态。

以下是链接：

我为获得它（.active状态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

您的问题是{{ $categoryList->categoryName->name}}类的选择器的专用性

您正在使用

.active

但是将所有.resources-links .active标签定位为

由于前导#use-cases-nav .resources-links a具有较高的特异性-因此，您要覆盖的#use-cases-nav属性不会被覆盖。

尽管填充属性被padding选择器覆盖，因为它确实具有更高的特异性。

a:hover

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

您的解决方案很简单，只需将#use-cases-nav .resources-links a:hover放入您的#use-cases-nav选择器中即可：

.active

尽管a：hover可以，但无法向导航栏添加.active状态样式

1 个答案: