Question

我正在尝试在导航栏上设置悬停和活动颜色。我搜索并查看了不同的帖子，但我找不到任何关于如何做到这一点。

我正在尝试做类似于Bootswatch的Slate主题https://bootswatch.com/slate/，但应用于蓝色导航栏。我在Nav部分查看了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

您可以通过在background-color和&:hover内声明新的&:focus来更改有效或悬停的背景颜色。

在_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

使用Bootstrap 4 SASS

1 个答案: