hover 上的 Bootstrap 4 按鈕變色

Question

我在網站上使用帶有 Bootstrap 4 的 Hugo Bigspring 主題。 我的主要號召性用語按鈕是橙色與次要綠色。 但是，我的橙色按鈕在 hover 上變成綠色，我不知道為什么。

按鈕代碼：

<a href="http://localhost:1313/contact" class="btn btn-primary">Contact Us</a>

CSS：

.btn-primary:hover,
.btn-primary:focus {
    background-color: #F37021!important;
    border-color: #F37021!important;
    box-shadow: none;
    outline: none;
}

.btn-primary {
    color: #fff;
    background-color: #F37021!important;
    border-color: #F37021!important;

您可以在此處實時查看該網站： https://www.bridge12.com 。

橙色按鈕位於頁面的右上角和底部。

真的很感謝你的幫助——我已經把頭撞在牆上好幾個小時了。

Answer 1

CSS 中的此代碼塊正在更改顏色：

.btn-primary:active, .btn-primary:hover, .btn-primary.focus, .btn-primary.active {
    background-color: #46812b!important;
    border-color: #46812b!important;
}

Answer 2

通過檢查您的網站並檢查元素，這就是顯示的內容

因此，看起來引導程序或其他自定義 CSS 正在覆蓋您的代碼。 確保引導程序 css 始終在您的自定義代碼之前加載。

Answer 3

您的 btn-primary 的背景顏色設置為 #46812b；重要，我確信它不是引導程序 css。 這僅意味着您已在 css 的某處聲明。 仔細檢查，你會發現它。

Answer 4

謝謝大家 - 這非常有幫助。 我按以下順序加載樣式表：

  <!-- Custom Stylesheet -->
  <link rel="stylesheet" href="http://localhost:1313/css/custom.css">

  <link href="http://localhost:1313/scss/style.min.css" rel="stylesheet" media="screen"/>

將其更改為此立即修復它：

  <link href="http://localhost:1313/scss/style.min.css" rel="stylesheet" media="screen"/>

  <!-- Custom Stylesheet -->
  <link rel="stylesheet" href="http://localhost:1313/css/custom.css">

非常感謝！