无法点击具有 CSS 动画背景的 link

Question

我正在做关于 CSS 动画的家庭作业，我需要向所有页面添加导航。

我的一个页面的整个页面都有动画背景。我已经添加了一个 link 应该将用户带回主页，但是这个 link 不能被点击或悬停？

这是我的 HTML:

<div class="nav">
     <nav>
          <ul>
               <li><a href="index.html">Motion Samples</a></li>
          </ul>
     </nav>
</div>

Answer 1

confirm u are allready other page  not in index



  <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="/">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">add pets</a>
        </li>
        {% if user.is_authenticated %}

        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown"
            aria-expanded="false">
            {{user}}

          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <li>
              <a class="dropdown-item" href="{% url 'account_email' %}">Change E-mail</a>
            </li>
            <li><a class="dropdown-item" href="{% url 'account_change_password' %}">Change Password</a></li>

            <li><a class="dropdown-item" href="{% url 'account_logout' %}">Sign Out</a></li>
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li>
              <hr class="dropdown-divider">
            </li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>


        {% else %}

        <li class="nav-item">
          <a class="nav-link" href="{% url 'account_login' %}">Sign In</a>

        </li>

        <li class="nav-item">
          <a class="nav-link" href="{% url 'account_signup' %}">Sign Up</a></li>
        </li>

        {% endif %}
      </ul>

      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>

    </div>

Answer 2

原来是我的 div 容器上的 z-index 有问题！ :)

无法点击具有 CSS 动画背景的 link

Can't click on link with CSS animated background

html

css

hyperlink