时间戳

首页 > 解决方案 > 为什么我的链接到同一页面中某个部分的按钮在我的 jumbotron 中不起作用？它在jumbotron之外工作

html - 为什么我的链接到同一页面中某个部分的按钮在我的 jumbotron 中不起作用？它在jumbotron之外工作

问题描述

我试图在我的 jumbotron 底部附近有一个按钮来链接到页面中的特定部分。但是，该按钮甚至不会单击。当我将鼠标悬停在它上面时，它甚至不会显示任何内容。如果我将按钮放在 jumbotron 之外，它可以正常工作。我怎样才能让它在 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;

}

标签： htmlcssbootstrap-4

解决方案

通过使用#viewworkButt a:hover，您正在尝试选择一个在id 的某个元素a内的viewworkButt一个。

正确的 CSS 是：

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

所以现在它的意思是：一个a带有viewworkButt身份的。希望能帮助到你。

推荐阅读