无法单击浮动在另一个div上的div中的链接

Question

我的网站有问题：

 body { margin: 0; font-family: Tahoma; background-color: #000000; background-size: cover; background-attachment: fixed; color: #ffffff; } @keyframes fadein { from { opacity: 0; } to { opacity: 1; } } #content { margin-top: 50px; animation: fadein 5s; } ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: rgba(0, 0, 0, 0.00); position: fixed; top: 0; width: 100%; } li { float: left; } li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } a { transition: all 0.5s; } /* Menu Bars */ .section-1 { position: fixed; text-align: center; width: 25%; top: 20%; height: 60%; float: left; display: block; z-index: 1; background-color: #000000; } .section-1:hover + .menu-1 { opacity: 1; transition: opacity 0.5s ease-in-out; } .menu-1 { position: fixed; text-align: center; width: 25%; top: 20%; height: 60%; float: left; z-index: 2; background-color: rgba(255, 0, 0, 0.50); display: block; opacity: 0; transition: opacity 0.5s ease-in-out; pointer-events: none; } 

 <body> <div id="navigation-menu"> <ul> <li><a href="index.html">Title</a></li> </ul> </div> <div id="content"> <div class="section-1"> <p>Menu 1</p> </div> <div class="menu-1"> <br /> <br /> <br /> <br /> <br /> <br /> <a href="#">Link 1</a> </div> </div> </body> 

如您所见，预期的行为是，当我将div悬停在带有“菜单1”文本的div上时，将出现带有“链接1”链接的div，并且可单击“链接1”链接，这会将用户定向到另一个页。 但是，“链接1”超链接不可单击，而是突出显示“菜单1”文本。

我该如何做才能单击“ Like 1”超链接？

Answer 1

您在.menu-1上pointer-events:none 。 如果您绝对需要保留此属性，请在a标签中添加pointer-events:auto 。 但是，我建议您对代码进行重组，以便菜单可以在不覆盖的情况下进行转换。