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>

希望这会有所帮助

Answer 2

想通了！这是因为::before伪元素将鼠标悬停在链接上，从而阻止了其被单击。我改为设置其top: $navbar-height并删除其height。这停止了它的阻塞。

导航栏阻止内部链接的可点击性

2 个答案: