使用 Bootstrap 4 SASS 更改导航栏背景悬停颜色

Question

我正在尝试在导航栏上设置悬停和活动颜色。我搜索并查看了不同的帖子，但找不到任何有关如何执行此操作的信息。

我正在尝试做一些类似于 Bootswatch 的 Slate 主题 https://bootswatch.com/slate/ 但应用于蓝色导航栏的事情。我在导航部分查看了 Bootswatch 的 _variables 和 _bootswatch 文件，看看我是否能弄清楚它们是如何做到的，但我没有看到。我找不到他们在哪里设置任何悬停背景颜色。

谁能指出我如何在 BS4 中更改悬停/活动背景颜色的正确方向？

这是我的导航栏。

<nav class="navbar navbar-expand-md navbar-dark bg-dark">
        <a class="navbar-brand" href="#">Employee Access</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarCollapse">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Logs</a>
                </li>
            </ul>
        </div>
    </nav>

这些来自 Slate 主题。 _bootswatch.scss

// Navbar ======================================================================

.navbar {
  border: 1px solid rgba(0, 0, 0, 0.6);
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);

  .container {
    padding: 0;
  }

  .navbar-toggler {
    border-color: rgba(0, 0, 0, 0.6);
  }

  &-fixed-top {
    border-width: 0 0 1px 0;
  }

  &-fixed-bottom {
    border-width: 1px 0 0 0;
  }

  .nav-link {
    padding: 1rem;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    border-right: 1px solid rgba(0, 0, 0, 0.2);

    &:hover,
    &:focus {
      @include btn-shadow-inverse($gray-800);
      border-left: 1px solid rgba(0, 0, 0, 0.2);
    }
  }

  &-brand {
    padding: 0.75rem 1rem calc(54px - 0.75rem - 30px);
    margin-right: 0;
    border-right: 1px solid rgba(0, 0, 0, 0.2);
  }

  .nav-item.active .nav-link {
    background-color: rgba(0, 0, 0, 0.3);
    border-left: 1px solid rgba(0, 0, 0, 0.2);
  }

  &-nav .nav-item + .nav-item {
    margin-left: 0;
  }

  &.bg-light {
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);

    .nav-link {
      &:hover,
      &:focus {
        @include btn-shadow-inverse($gray-600);
        border-left: 1px solid rgba(0, 0, 0, 0.2);
      }
    }
  }
}

@media (max-width: 576px) {
  .navbar-expand-sm {
    .navbar-brand,
    .nav-link {
      border: none !important;
    }
  }
}

@media (max-width: 768px) {
  .navbar-expand-md {
    .navbar-brand,
    .nav-link {
      border: none !important;
    }
  }
}

@media (max-width: 992px) {
  .navbar-expand-lg {
    .navbar-brand,
    .nav-link {
      border: none !important;
    }
  }
}

_variables.scss

// Navbar

$navbar-padding-y:                  0 !default;

$navbar-dark-hover-color:           $white !default;

$navbar-light-hover-color:          $gray-800 !default;
$navbar-light-active-color:         $gray-800 !default;

更新答案

我想通过我得到的帮助来解决这个问题，希望能帮助别人。可能还有其他方法可以做到这一点，但它对我有用，但我愿意提出任何改进这一点的建议。

site.scss - 我使用以下内容将我的自定义更改导入到 Bootstrap 4

@import "scss/_my-variables.scss";
@import "bootstrap/bootstrap.scss";
@import "scss/_my-theme.scss";

_my-variables.scss - 现在我只将颜色改为蓝色。

$blue: #0078D2;

_my-theme.scss - 我使用了 darken 功能来设置悬停/活动颜色。这样，如果您想要不同的颜色，例如蓝绿色或红色，那么该功能将自动更改为该颜色。

$active-bg-color: darken($blue, 10%);       

.navbar {
    border-bottom: 1px solid darken($active-bg-color, 20%);
}

.nav-link {
    &:hover {
        background-color: $active-bg-color;
    }
}

.navbar-dark .navbar-nav .active > 
.nav-link {
    background-color: $active-bg-color;
}

Answer 1

您可以通过在&:hover 和&:focus 中声明一个新的background-color 来更改活动或悬停的背景颜色。

在 _bootswatch.scss 中，它们是这样做的：

.nav-link {
  padding: 1rem;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  border-right: 1px solid rgba(0, 0, 0, 0.2);

  &:hover,
  &:focus {
    @include btn-shadow-inverse($gray-800);
    border-left: 1px solid rgba(0, 0, 0, 0.2);
  }
}

编辑

所以你会在你的 css 中想要这样的东西：

.nav-link {
  &:hover,
  &:active {
    background-color: blue;
  }
}

工作示例：https://codepen.io/anon/pen/jzvBaW