html - 导航栏阻止内部链接的点击能力

Question

我正在尝试制作一个简单的导航栏，其中包含一些可点击的链接。但是，现在我实际上无法单击导航栏的内容。我有一种感觉，导航栏正在“阻止”内部链接的可访问性，但长话短说，我希望实际上能够单击这些链接。我在下面附上了我的 html 和 scss 片段。我哪里出错了？

<nav class="cool-navbar">
        <div class="left-buttons">
            <a class="cool-link">Sammy Al Hashemi</a>
        </div>
        <div class="middle-spacer"></div>
        <div class="right-buttons">
            <a class="cool-link">Projects</a>
            <a class="cool-link">Contact</a>
        </div>
</nav>

.cool-navbar {
  display: flex;
  flex-direction: row;
  width: 100vw;
  height: $navbar-height;
  background: inherit;

  .left-buttons {
    width: auto;
  }
  .middle-spacer {
    flex-grow: 1;
  }
  .right-buttons {
    width: auto;
  }

  .left-buttons .cool-link,
  .right-buttons .cool-link {
    display: inline-block;
    text-align: center;
    cursor: pointer;
    padding: 15px 35px 12px 35px;
    background: inherit;
    font-family: $font-stack;
    text-align: center;
    font-size: $secondary-font-size;
    color: $secondary-color;
    animation: cool-button-entrance 1s ease-in-out 0s 1 backwards;
    -webkit-animation: cool-button-entrance 1s ease-in-out 0s 1 backwards;
  }
}

.cool-navbar::before {
  content: '';
  position: absolute;
  border-bottom: $secondary-color solid 1px;
  width: 100%;
  height: $navbar-height;
  animation: cool-border-animation 1s ease-in-out 0s 1 both;
  -webkit-animation: cool-border-animation 1s ease-in-out 0s 1 both;
}

Answer 1

问题是 <a> tag链接没有被赋予超文本引用。它可以像这样使用 href 属性设置:<a href="link goes here">您可以将对“#”的引用设置为占位符，直到您有指向以下位置的链接:

<nav class="cool-navbar">
    <div class="left-buttons">
        <a href="#" class="cool-link">Sammy Al Hashemi</a>
    </div>
    <div class="middle-spacer"></div>
    <div class="right-buttons">
        <a href="#" class="cool-link">Projects</a>
        <a href="#" class="cool-link">Contact</a>
    </div>
</nav>

希望对你有帮助