如何在 div 未激活时阻止不可见元素"overlay"触发

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;
}