CSS悬停在悬停错误上

目前我的悬停选择器有问题。 整个想法是作者的图像可以悬停，悬停时会显示姓名和按钮。但是，我也希望能够悬停按钮，而不必从图像悬停开始出现故障和消失。我尝试了

指针事件：无但这不允许我将按钮悬停或单击它

我怎样才能使选择器使一切正常，但当我尝试悬停按钮或至少当我单击它时，它就不工作了

图像的代码：

&--upper::before {
    content: '';
    background-color: rgba(0, 0, 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>


Алеко
Константинов
你能把它放在JSFIDLE中吗？给你。希望对你有帮助！但是代码是css而不是sass，希望这不是问题！基本上，你不能。一次只能有效地悬停一个项目。此外，对于当前的HTML结构，您不能通过悬停图像来影响
details
div，因为没有父选择器。需要进行结构更改，至少从将details div放入
图中开始，这样它就可以受到图像悬停的影响。