html - 悬停元素时更改另一个元素的 ::after 选择器

我有一个超级简单的页面，由背景和中间的徽标组成。当我将鼠标悬停在中间的徽标上时，我想更改背景图像的过滤器。我怎样才能做到这一点？我尝试使用 + > ~ 运算符，但无法使其工作。这是我的 CSS

    .showcase::after {
    content:'';
    height: 100vh;
    width: 100%;
    background-image: url(resim.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: block;
    transition: all 1s;
    filter: saturate(140%);
}


.logo {
    position: absolute;
    z-index: 1;
    width: 100px;
    transition: all 1s;
    filter: opacity(0%);
    cursor: pointer;
}

.logo:hover + .showcase::after {
filter: saturate(0%);
}

这是我的 HTML

<body>
    <header class="showcase">
        <img src="logo.png" class="logo" alt="">
    </header>
</body>
</html>

悬停元素时更改另一个元素的 ::after 选择器

0 个答案: