Question

因此，在我的代码中，我有一个包含两个锚标记的区域。为了使该区域看起来不错，我为其创建了两个新的:: before和:: after伪选择器，它们将使鼠标悬停在该区域上之后便会产生动画。无论如何，在我这样做之后，锚标记完全无法访问。我知道这与伪类之前和之后的内容有关，因为一旦我将它们注释掉，便可以再次访问定位标记。我已经尝试过z-index，但是仍然可以。这是代码：

CSS

.log__signLi a {
    display: inline-block;
    z-index: 10;
}

.log__signLi {
    margin-bottom: 1.6rem;
}

.log__sign {
    position: relative;
    transition: all .4s;
    display: inline-block;
    margin-bottom: 2rem;
    border: 0px solid transparent;
}

.log__sign:hover {
    background-color: rgb(250, 250, 250);
    border-radius: 1rem;

    z-index: 0;
}

.log__sign:hover::before {
    content: "";
    position: absolute;
    top: 0%;
    left: 0%;

    height: 100%;
    width: 100%;

    display: inline-block;
    margin-bottom: 2rem;

    animation-name: log__signBottomLeft;
    animation-timing-function: ease-in-out;
    animation-duration: .6s;

    border-bottom: green 2.3px solid;
    border-left: green 2.3px solid;
    border-radius: 1rem;

    z-index: 0;
}

.log__sign:hover::after {
    content: "";
    position: absolute;
    top: 0%;
    left: 0%;

    height: 100%;
    width: 100%;

    display: inline-block;
    margin-bottom: 2rem;

    animation-name: log__signTopRight;
    animation-timing-function: ease-in-out;
    animation-duration: .6s;

    border-top: green 2.3px solid;
    border-right: green 2.3px solid;
    border-radius: 1rem;

    z-index: 0;
}

  <nav class="navbar">
        <ul class="navbar__ul">
            <span class="left">
                <li class="navbar__li"> <a href="#"> Coffee </a>  </li>
                <li class="navbar__li"> <a href="#"> Tea </a>  </li>
                <li class="navbar__li"> <a href="#"> Menu </a>  </li>
                <li class="navbar__li"> <a href="#"> Recipes  </a>  </li>
            </span>

            <div class="logo__box">
                <a href="index.html"> <img class="logo" src="https://upload.wikimedia.org/wikipedia/en/thumb/d/d3/Starbucks_Corporation_Logo_2011.svg/1200px-Starbucks_Corporation_Logo_2011.svg.png"> </a>
            </div>

            <span class="right">
                <li class="navbar__li"> <a href="#"> Blog </a>  </li>
                <li class="navbar__li"> <a href="#"> Gift Cards </a>  </li>
                <li class="navbar__li"> <a href="#"> Reviews </a>  </li>

                <span class="log__sign">
                    <li class="navbar__li log__signLi"> <a href="#" class="log__signBtn"> Login </a> </li>
                    <li class="navbar__li log__signLi"> <a href="#" class="log__signBtn"> Sign Up </a> </li>
                </span>
            </span>
        </ul>
    </nav>

Answer 1

通过将悬停效果的z索引从0更改为-99，我可以使您的链接正常工作。

serverToken

  .log__signLi a {
    display: inline-block;
    z-index: 10;
}

.log__signLi {
    margin-bottom: 1.6rem;
}

.log__sign {
    position: relative;
    transition: all .4s;
    display: inline-block;
    margin-bottom: 2rem;
    border: 0px solid transparent;
}

.log__sign:hover {
    background-color: rgb(250, 250, 250);
    border-radius: 1rem;

    z-index: 0;
}

.log__sign:hover::before {
    content: "";
    position: absolute;
    top: 0%;
    left: 0%;

    height: 100%;
    width: 100%;

    display: inline-block;
    margin-bottom: 2rem;

    animation-name: log__signBottomLeft;
    animation-timing-function: ease-in-out;
    animation-duration: .6s;

    border-bottom: green 2.3px solid;
    border-left: green 2.3px solid;
    border-radius: 1rem;

    z-index: -99;
}

.log__sign:hover::after {
    content: "";
    position: absolute;
    top: 0%;
    left: 0%;

    height: 100%;
    width: 100%;

    display: inline-block;
    margin-bottom: 2rem;

    animation-name: log__signTopRight;
    animation-timing-function: ease-in-out;
    animation-duration: .6s;

    border-top: green 2.3px solid;
    border-right: green 2.3px solid;
    border-radius: 1rem;

    z-index: -99;
}

Answer 2

只需将pointer-events: none添加到您的::before和::after伪元素中，您的链接就可以访问了。

顺便说一句，您定义::before和::after的方式是错误的，您应该先定义它们，然后在::hover状态下设置样式；但是第一个技巧应该可以轻松解决您的问题。

让我知道它是否可行。

:: after和:: before伪类阻止锚标记

2 个答案: