Почему добавление пользовательского класса в элемент начальной загрузки не работает в Chrome, но работает в ребре?

Question

Я добавляю пользовательский класс к некоторым элементам, которые сделаны с помощью начальной загрузки 4 здесь, в навигации, я добавил ukzcol, который в основном меняет только фон, и он работает нормально, вот класс ukzcol:

.ukzcol {
  background-color: rgb(0, 23, 51) !important;
}

 <nav class="nav navbar-nav ukzcol text-white border-bottom sticky-top">
      <div class="row">
        <div class="col-6">
          <div class="nav-item navbar-brand ml-3 ">
            <img src="logo.png" alt="logo" />
          </div>
        </div>
        <div class="col-6">
          <div class="float-right mr-5 h-100" id="sidebar">

но здесь:

            <h6 class="d-inline btn ukzcol ukzcolhv ">
              <i class="fas fa-user "></i> <?php echo $_SESSION['emri']; ?>
            </h6>
            <form action="" method="POST" class="d-inline">
              <button
                type="submit"
                name="logout"
                class="btn  h-100 text-white d-inline ukzcol ukzcolhv"
              >
                Logout <i class="fas fa-power-off"></i>
              </button>
            </form>
          </div>
        </div>
      </div>
    </nav>

ukzcolhv, который должен изменять только цвет фона при наведении, не работает на chrome, но в кромке да

вот класс ukzcolhv:

.ukzcolhv:hover {
  background-color: rgb(3, 35, 75) !important;
}

Я пытался добавить -webkit, но все еще не работает, почему?Есть ли способ это исправить?

Answer 1

Я скопировал код, который вы добавили в jsfiddle, изменив цвета, чтобы сделать его более видимым

.ukzcolhv:hover {
  background-color: red !important;
}

.ukzcol {
  background-color: green !important;
}

https://jsfiddle.net/xf9od1et/8/

, и он отлично работает в Chrome.После наведения на h6 цвет фона элемента меняется.