无法单击带有CSS动画背景的链接

Question

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

我的一个页面有一个贯穿整个页面的动画背景。我已经添加了一个链接，应该把用户带回到主页，但这个链接不能点击或悬停?

这是我的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的问题!:)