左邊框重疊CSS

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;
}