Question

我的网站有点问题：

＆＃13;

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

＆＃13;

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

＆＃13;

正如您所看到的，预期的行为是当我使用＆＃34;菜单1＆＃34;文本，div与＃34;链接1＆＃34;链接出现并且＆＃34;链接1＆＃34;链接是可点击的，将用户引导到另一个页面。然而，＆＃34;链接1＆＃34;超链接是不可点击的，而是突出显示＆＃34;菜单1＆＃34;文本。

我如何做到这样，以便＆＃34;喜欢1＆＃34;可以点击超链接吗？

Answer 1

pointer-events:none上有.menu-1。如果您确实需要保留此属性，请将pointer-events:auto添加到a标记。但是，我建议重新构建代码，以便菜单可以在没有叠加层的情况下进行转换。

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

1 个答案: