我有一个汉堡包按钮,以便使用 JS 在我的 HTML 文件中显示侧边栏。基本上它是 <div>
的代码片段,一个小的 JS 代码,和一个 <span>
包含实际汉堡包的类。我想做的是将汉堡包按钮(它不是由按钮类定义的)与标题内联。我设法做到了,但由于某种原因,该按钮现在不起作用。有人可以告诉我为什么会这样吗?是否有任何其他方法可以将按钮与 header 类内联?
/*CSS for header:*/
.header {
position: absolute;
top: 0;
left: 50%;
width: 90%;
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
font-family: "Operator SSm A", "Operator SSm B", monospace;
font-weight: 300;
font-size: 1rem;
-webkit-transition: all 0.6s cubic-bezier(0.77, 0, 0.175, 1);
transition: all 0.6s cubic-bezier(0.77, 0, 0.175, 1);
opacity: 0;
margin-top: 10px;
pointer-events: none;
}
/*CSS for hamburger menu:*/
.overlay-nav {
height: 100%;
width: 0;
position: fixed;
top: 0;
left: 0;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.9);
overflow-x: hidden;
transition: 0.5s;
z-index: 2000;
}
<header class="header" style="width:100%" id="header">
<div class="loading"></div>
<div id="index" class="overlay-nav">
<a href="javascript:void(0)" class="closebtn-nav" onclick="closeNav()">×</a>
<div class="overlay-nav-content">
<a href="#">Home</a>
<a href="#">About Us</a>
<a href="#">Sessions</a>
<a href="#">Competitions</a>
<a href="#">Meetings</a>
</div>
</div>
<span style="font-size:20px; cursor:pointer" onclick="openNav()">☰ </span>
<script>
function openNav() {
document.getElementById("index").style.width = "100%";
}
function closeNav() {
document.getElementById("index").style.width = "0%";
}
</script>
<div class="header__logo">
<img src="" alt="" />
<h1></h1>
</div>
P.S 发生这种情况是因为指针事件设置为无吗?
最佳答案
是的,这是因为您正在使用 pointer-events: none
,它会禁用鼠标引起的任何事件。也许您的意思是使用 pointer: none
来摆脱任何指针。
此外,我不确定您的 .header
类中有 opacity: 0
的原因,但那是隐藏按钮甚至不可见。
文档
https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events
关于javascript - <span> 按钮在标题类中不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53735746/