当“叠加”div不活动时，如何阻止不可见元素被触发

Question

当我使用 flexbox 对齐覆盖 div 内的项目时，一切正常，除了被触发的锚标签，甚至不必打开菜单，标签是不可见的，但在旁边可以点击菜单，如何在不更改菜单或叠加层样式的情况下修复它？任何帮助表示赞赏。干杯！

$(function() {

  $(".menu-link").click(function(e) {
    e.preventDefault();

    $(".menu-overlay").toggleClass("open");
    $(".menu").toggleClass("open");

  });

});

$('.menu-link').click(function() {
  $('body').toggleClass('no-scroll');
});

.nav {
    display: flex;
    justify-content: space-between;
    padding: 0 5%;
}

#brandname {
    color: black;
    font-weight: bold;
    font-family: Circular Std Black;
    line-height: 60px;
    font-size:20px;
    margin-top: 45px;
}

.menu {
  position: absolute;
  margin-top: 50px;
  right: 5%;
  height: 46px;
  width: 46px;
}

.menu-link {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1002;
}

.menu-icon {
  position: absolute;
  width: 20px;
  height: 15px;
  margin: auto;
  left: 0;
  top: 0;
  right: 0;
  bottom: 1px;
}

/* ------------- */
.menu-line {
  background-color: white;
  height: 3px;
  width: 100%;
  border-radius: 2px;
  position: absolute;
  left: 0;
  transition: all 0.25s ease-in-out;
}
.menu-line-2 {
  top: 0;
  bottom: 0;
  margin: auto;
}
.menu-line-3 {
  bottom: 0;
}
.menu.open .menu-line-1 {
  transform: translateY(7.5px) translateY(-50%) rotate(-45deg);
}
.menu.open .menu-line-2 {
  opacity: 0;
}
.menu.open .menu-line-3 {
  transform: translateY(-7.5px) translateY(50%) rotate(45deg);
}

/* ------------- */
.menu-circle {
  background-color: #E095F0;
  width: 100%;
  height: 100%;
  position: absolute;
  border-radius: 50%;
  transform: scale(1);
  z-index: 1000;
  transition: transform 0.3s ease-in-out;
}
.menu:hover .menu-circle {
  transform: scale(1.2);
}
.menu.open .menu-circle {
  transform: scale(60);
}

/* ------------- */
.menu-overlay {
  transition: opacity 0.2s ease-in-out;
  opacity:0;
  display:block;
}

.menu-overlay.open {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    opacity: 1;
    display: block;
    z-index: 1001;
    background-color: black;
    overflow: hidden;
    display: flex;
    align-items: center;
    transition: opacity 1.5s ease-in-out;
}


.no-scroll{
    overflow: hidden;
}



.contents {
    margin-left: 5%;
    margin-right: 5%;
    display: flex;
    flex: 1;
    max-width: 100%;
    justify-content: space-around;
}

.contents a {
    text-decoration: none;
    font-family: Circular Std Book;
    font-size: 35px;
    color: white;

}

.contents a:hover {
    transform: scale(1.2);
    transition: opacity 5s ease-in-out;
}

<nav class="nav">
    <div id="brandname">Test</div>
    <div class="menu">
      <span class="menu-circle"></span>
      <a href="#" class="menu-link">
        <span class="menu-icon">
          <span class="menu-line menu-line-1"></span>
          <span class="menu-line menu-line-2"></span>
          <span class="menu-line menu-line-3"></span>
        </span>
      </a>
    </div>

    <div class="menu-overlay">
        <div class="contents">
              <a href="{% url 'main:homepage' %}">Home</a>
              <a href="{% url 'main:login' %}">Log in</a>
              <a href="{% url 'main:signup' %}">Sign up</a>
              <a href="#">About</a>
        </div>
    </div>


</nav>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Answer 1

研究使用pointer-events 来停止鼠标事件 https://jsfiddle.net/vghszb1n/

.contents a {
  cursor: default;
  pointer-events: none;

  text-decoration: none;
  font-family: Circular Std Book;
  font-size: 35px;
  color: white;
}

.open .contents a {
  cursor: pointer !important;
  pointer-events: all !important;
}