当前，我的悬停选择器出现问题。Image Explanation 整个想法是可以悬停作者的图像，悬停时将显示姓名和按钮。但是，我也希望能够将按钮悬停在图像上而不悬停，从而开始出现毛刺和消失。我尝试了pointer-events: none;，但这不允许我将按钮悬停或单击。

如何使选择器起作用，以便一切正常，但当我尝试将按钮悬停时或至少在单击按钮时，它才无效。

图片代码：

&--upper::before {
    content: '';
    background-color: rgba(0,0.7);
    position: absolute;
    border-radius: 2rem;
    height: 18rem;
    width: 15rem;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transition: all .5s;
}

&--upper:hover::before {
    -webkit-transform: translateX(0);
    transform: translateX(0);
}

&--upper::before {
    -webkit-transform: translateY(100%);
            transform: translateY(100%);

}

按钮的代码：

a:link,a:visited {
    position: absolute;
    color: $color-white;
    text-decoration: none;
    padding: 1rem 3rem;
    border: 1px solid $color-white;
    background-color: transparent;
    visibility: hidden;
}

以及html的结构：

        <figure class="author author--upper author--1">
            <img src="img/aleko-konstantinov.jpg" alt="Aleko Konstantinov Photo" class="author__image">
        </figure>
        <div class="details details--upper details--1">
            <span class="first-name first-name--1">Алеко</span>
            <span class="second-name second-name--1">Константинов</span>
            <a href="#" class="details__btn details__btn--1">Прочети</a>
        </div>