我已经创建了一个下拉联系人菜单,其中包含 2 个链接。但似乎当我点击联系按钮,然后点击所需的链接时,它只会关闭下拉菜单,而不会将用户重定向到任何地方。我在某处读到这是因为另一个鼠标按下事件会触发 :focus 基本上没有焦点?我怎样才能使这个菜单工作?我只知道一点点javascript。
下面的 HTML -
<div class="contact">
<button class="contactbtn">Contact</button>
<ul>
<li>
<p>For Any Enquiries→</p>
</li>
<li><a id="mail" href="mailto:hello@shekleung.com">hello@shekleung.com</a></li>
<li>+44 7463 070158</li><br>
<li><a id="ig" href="https://www.instagram.com/samsonleung/?hl=en">Instagram</a></li>
</ul>
</div>
.contact {
position: relative;
top: 5vh;
right: 0;
font-family: Helvetica, sans-serif;
height: 10vh;
letter-spacing: 3px;
}
.contactbtn {
color: black;
text-transform: uppercase;
font-size: 1.5rem;
font-weight: bold;
background: none;
border: none;
text-decoration: none;
cursor: pointer;
outline: none;
}
.contactbtn:hover {
opacity: 0.6;
}
.contact ul,
.contact-a ul {
position: absolute;
left: -10vw;
margin-top: 20px;
width: 300px;
height: 150px;
font-size: 1.5rem;
font-weight: bold;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: flex-end;
list-style: none;
text-transform: uppercase;
font-size: 1rem;
opacity: 0;
pointer-events: none;
transform: translateY(-10px);
transition: all 0.4s ease;
}
.contact a,
.contact-a a {
color: black;
text-decoration: none;
}
.contact a:hover,
.contact-a a:hover {
/* opacity: 0.6; */
background-color: var(--grCol3);
}
.contactbtn:focus+ul {
opacity: 1;
pointer-events: all;
transform: translateY(0);
outline: none;
}
.contact-a {
position: absolute;
top: 5vh;
left: 5vw;
font-family: Helvetica, sans-serif;
height: 10vh;
letter-spacing: 3px;
color: var(--grCol3);
}
.contact-a ul {
align-items: flex-start;
left: 0;
}
<div class="contact-a">
<button class="contactbtn">Contact</button>
<ul class="contact-content">
<li>
<p>For Any Enquiries→</p>
</li>
<li><a href="mailto:hello@shekleung.com">hello@shekleung.com</a></li>
<li>+44 7463 070158</li><br>
<li><a href="https://www.instagram.com/samsonleung/?hl=en">Instagram</a></li>
</ul>
</div>
最佳答案
那是因为你设置了pointer-events: none
对于无序列表。这会影响它的 child <li>
以及。
.contact ul,
.contact-a ul {
position: absolute;
left: -10vw;
margin-top: 20px;
width: 300px;
height: 150px;
font-size: 1.5rem;
font-weight: bold;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: flex-end;
list-style: none;
text-transform: uppercase;
font-size: 1rem;
opacity: 0;
pointer-events: none; <<<<<<<<<<<<<<<<<<<< cause of problem
transform: translateY(-10px);
transition: all 0.4s ease;
}
最好去掉那个。
关于javascript - 如何使纯 CSS 下拉菜单与其中的两个可重定向链接一起工作?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63569201/