时间戳

首页 > 解决方案 > Bootstrap 4按钮颜色在悬停时改变

html - Bootstrap 4按钮颜色在悬停时改变

问题描述

我在网站上使用带有 Bootstrap 4 的 Hugo Bigspring 主题。我的主要号召性用语按钮是橙色与次要绿色。但是，我的橙色按钮在悬停时变成绿色，我不知道为什么。

按钮代码：

<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 。

橙色按钮位于页面的右上角和底部。

真的很感谢你的帮助——我已经把头撞在墙上好几个小时了。

标签： htmlcssbootstrap-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">

非常感谢！

推荐阅读