Почему моя кнопка, которая ссылается на раздел на той же странице, не работает в моем jumbotron?Это работает за пределами jumbotron

Question

Я пытаюсь сделать так, чтобы кнопка внизу моего джумботрона указывала на определенный раздел на странице.Тем не менее, кнопка даже не нажмет.Он даже ничего не покажет, когда я наведусь на него.Если я размещу кнопку за пределами jumbotron, он работает нормально.Как я могу заставить его работать в jumbotron?Кнопка сделана с начальной загрузкой, а также с jumbotron.У меня есть z-index на самом оверлее и на джумботроне.Не уверен, что это имеет значение.

  <div class ="jumbotron jumbotron-fluid" id ="jumbo">
    <div class ="container" id ="jumbo-overlay">
      <h1 id ="jumbohead"></h1>
      <div id ="viewButt">
          <a class="btn btn-lg btn-outline-secondary" href="#aboutme" id ="viewworkButt"></a>
      </div>
    </div>
  </div>



#viewButt {

    padding-top: 300px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    cursor: pointer;


}

#viewworkButt a:hover {

    background-color: yellowgreen;

}

Answer 1

Используя #viewworkButt a:hover, вы пытаетесь выбрать a, то есть внутри некоторый элемент с идентификатором viewworkButt.

Правильный код CSS:

a#viewworkButt:hover {
    background-color: yellowgreen;
}

Так что теперь это означает: a с viewworkButt в качестве идентификатора. Надеюсь, это поможет.