Question

我有一个带有一些css的菜单。我在页面处于活动状态时激活它

<li <?php echo (strpos(current_url(), 'history') !== false) ? "class='active'" : ""; ?>>
      <a href="<?= base_url() ?>dashboard/history">History</a>
</li>

当悬停和聚焦

时，我也有自己的css菜单

.side-nav li a:hover,
.side-nav li a:focus {
    outline: none;
    background-color: #f8f8f8 !important;
    font-weight: bold;
    border-left: 6px solid #337AB7;
    -webkit-box-shadow: -4px 4px 6px -4px #a5a5a5;
    box-shadow: -4px 4px 6px -4px #a5a5a5;
}

课程活跃

.side-nav li.active{
    background-color: #f8f8f8 !important;
    font-weight: bold;
    border-left: 6px solid #337AB7;
    -webkit-box-shadow: -4px 4px 6px -4px #a5a5a5;
    box-shadow: -4px 4px 6px -4px #a5a5a5;
}

我的问题是当活动类处于活动状态时，我将鼠标悬停在菜单栏上，我在该元素上有2个边框。如何在元素处于活动状态时删除第二个边框？

Answer 1

您的问题是，您正在使用css访问两个不同的元素。使用第一个定义，您将访问:focus中:hover元素内任意a元素上的伪选择器li和.side-nav。使用第二个定义，您只访问li元素，而不是包含a元素。如下定义.active课程可以解决您的问题：

.side-nav li.active a {
    background-color: #f8f8f8 !important;
    font-weight: bold;
    border-left: 6px solid #337AB7;
    -webkit-box-shadow: -4px 4px 6px -4px #a5a5a5;
    box-shadow: -4px 4px 6px -4px #a5a5a5;
}

重叠边框左边的CSS

1 个答案: