仅在特定 div 类中链接页面的问题

Question

所以我遇到了一个问题，我还是个新手，我的网站上有一个自定义光标，但是由于某种原因，当我将鼠标悬停在我的“项目”div 类第二列上时，链接不起作用.他们使用我的姓名、信息和联系信息，而不是项目，不知道为什么。如果有人可以帮助这将是惊人的。我曾尝试将 z-index 放在该列上或放在光标上，但随后一个只是隐藏了另一个。

$(document).ready(function() {


  var cursor = $(".cursor");

  $(window).mousemove(function(e) {
    cursor.css({
      top: e.clientY - cursor.height() / 2,
      left: e.clientX - cursor.width() / 2
    });
  });

  $(window)
    .mouseleave(function() {
      cursor.css({
        opacity: "0"
      });
    })
    .mouseenter(function() {
      cursor.css({
        opacity: "1"
      });
    });

});

html {
  scroll-snap-type: mandatory;
  scroll-snap-points-y: repeat(100vh);
  scroll-snap-type: y mandatory;
  font-weight: normal;
  webkit-overflow-scrolling: touch;
  padding: 0;
  margin: 0;
}

body {
  scroll-snap-type: mandatory;
  scroll-snap-points-y: repeat(100vh);
  scroll-snap-type: y mandatory;
  font-weight: normal;
  webkit-overflow-scrolling: touch;
  padding: 0;
  margin: 0;
  font-family: Sans;
  background-color: black;
  max-width: 10000px;
}

nav {
  display: flex;
  mix-blend-mode: exclusion;
  font-family: Sans;
  padding: 5px;
}

.name {
  flex: 1;
  width: 15%;
  position: fixed;
  padding-left: 10px;
  color: white;
  mix-blend-mode: exclusion;
  padding-top: 10px;
  z-index: 999;
}

.info {
  flex: 1;
  width: 15%;
  position: fixed;
  padding-left: 33.1%;
  color: white;
  mix-blend-mode: exclusion;
  padding-top: 10px;
  text-align: left;
  z-index: 99;
}

a {
  text-decoration: none;
  color: white;
  font-size: 25px;
}

h1 {
  align-content: center;
  height: auto;
  z-index: 10;
  font-size: 124px;
  text-align: center;
  color: white;
}

.clickNav {
  display: flex;
  flex-wrap: wrap;
  font-size: 24px;
  position: fixed;
  bottom: 0;
  padding-bottom: 10px;
  letter-spacing: .35px;
  width: 100%;
  font-family: Sans;
  mix-blend-mode: exclusion;
}

.contact {
  position: fixed;
  bottom: 9px;
  padding-left: 10px;
  mix-blend-mode: exclusion;
  z-index: 99;
}

.contact2 {
  position: fixed;
  bottom: 9px;
  padding-left: 80px;
  mix-blend-mode: exclusion;
  z-index: 98;
}

.cursor {
  position: fixed;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #ffff;
  mix-blend-mode: difference;
  z-index: 1;
}

html,
* {
  cursor: none;
  z-index: -1;
}

.column {
  width: 66%;
  flex: 2;
  padding-left: 33%;
  padding-top: 6%;
  font-size: 25px;
  line-height: 45px;
  font-family: Sans;
  letter-spacing: 1px;
  padding-bottom: 1px;
  margin-bottom: 1px;
}

.column-two {
  width: 66%;
  flex: 1;
  padding-left: 33%;
  padding-top: 3%;
  letter-spacing: 1px;
  padding-bottom: 1px;
  margin-bottom: 1px;
  max-width: 1500px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="cursor"></div>

<div class="nav">

  <div class="name"><a href="work.html">Ryan Stewart</a></div>
  <div class="info"><a href="information.html">Information</a></div>

</div>
<div class="contact"> <a href="https://www.instagram.com/ryanforprez/">Instagram</a><br>. <a href="https://www.are.na/ryan-stewart">Are.na</a>
</div>

<br><br>

<div class="column-layout">

  <div class="column-two">
    <a href="beansans.html"><img src="Images/Asset%2029.jpg" alt="Bean Sans" style="max- 
        width:100%;height:auto;"></a>

    <a href="alyx.html"><img src="Images/alyx1.jpg" alt="ALYX" style="max- 
    width:100%;height:auto;"></a>

    <div>
      <a href="cassette.html"><img src="Images/cass-02%20copy.png" alt="Cassettes" style="max-width:100%;height:auto;"></a>
    </div>

    <div>
      <a href="lookat.html"><img src="Images/lookat-this2.gif" alt="Look at This 
    Photograph" style="max-width:100%;height:auto;"></a>
    </div>

    <a href="popper.html"><img src="Images/pillpopcovermock%202.jpg" alt="Pill Popper" style="max-width:100%;height:auto;"></a>
    <a href="canyon.html"><img src="Images/arenamock-Recoverevd.jpg" alt="Canyon Daze" style="max-width:100%;height:auto;"></a>
    <a href="mutiny.html"><img src="Images/ring-01.png" alt="Mutiny" style="max-width:100%;height:auto;"></a>
    <a href="tendencies.html"><img src="Images/22.jpg" alt="Tendencies" style="max-width:100%;height:auto;"></a>
  </div>
</div>