Question

问题是

.sppb-nav-tabs {
        border-bottom: 1px solid #e5e5e5}

我的CSS中的

工作不正确。我将CSS的这一部分用于网页上的标签，我希望它们看起来像现在一样。但是，当您在选项卡之间切换时（例如，从选项卡1转到选项卡2），在您单击内容的某个位置之前，所选选项卡下仍存在border-bottom: 1px solid #e5e5e5。只有在标签border-bottom-color: transparent;之外的某个地方单击后，才会产生影响。我尝试了不同的解决方案，但没有成功。只有通过删除border-bottom: 1px solid #e5e5e5才能解决问题，但是根本没有一行。有什么想法可以解决此问题吗？

.sppb-nav-tabs {
    border-bottom: 1px solid #e5e5e5}
.sppb-tab-content {
    margin-top: 15px}
.sppb-nav-tabs-content {
    margin-top: 0;
    border-left: 1px solid #e5e5e5;
    background: #fff;
    border-top: 0;
    padding: 15px}
.sppb-nav-tabs>li {
    float: left;
    margin-bottom: -1px}
.sppb-nav-tabs>li>a {
    font-size: 14px;
    font-weight: bolder;
    line-height: 1.42857143;
    padding: 12px 15px;
    background: #f5f5f5;
    color: inherit;
    border: 1px solid #e5e5e5;
    border-radius: 3px;
    border-right-width: 1px}
.sppb-nav-tabs>li: last-child>a {
    border-right-width: 1px}
.sppb-nav-tabs>li>a>i {
    margin-right: 5px}
.sppb-nav-tabs>li.active>a,.sppb-nav-tabs>li.active>a:focus,.sppb-nav-tabs>li.active>a:hover {
    color: inherit;
    background-color: #fff;
    border-bottom-color: transparent;
    cursor: default}

Answer 1

在template.css的第3609行检查您的：active状态。单击锚点时，将获得一些重要数据。在chrome开发人员工具中，尝试打开锚点的活动状态，以查看在此状态下影响锚点的值。

.next .pager a, a:hover, a:focus, a:active {
    text-decoration: none;
    background-color: transparent !important;
}

Answer 2

解决问题的另一种方法是编辑选择器的bottom-border-color属性（在sppagebuilder.css的1890行）

.sppb-nav-tabs>li.active>a,.sppb-nav-tabs>li.active>a:focus,.sppb-nav-tabs>li.active>a:hover

您需要将border-bottom-color: transparent;替换为border-bottom-color: #fff;

如何为边框底部设置CSS

2 个答案: