html - 过滤的背景图像在悬停时隐藏我的文本 (SCSS)

Question

我遇到了一个错误，其中带有背景图像的 li 在悬停时隐藏了我的 h3 文本。当 li 悬停时，它会使用滤镜效果更改图像颜色。我尝试使用想要的颜色单独制作 h3 悬停效果并设置更高的 z-index，但它没有解决问题。

也许你知道出了什么问题？

这是我的代码示例：

HTML

<div class="nav-bar">
    <ul>
        <li id="home">
            <h3>Home</h3>
        </li>
        <li id="video">
            <h3>Video</h3>
        </li>
        <li id="artworks">
            <h3>Artworks</h3>
        </li>
        <li id="blogs">
            <h3>Blogs</h3>
        </li>
        <li id="social">
            <h3>Social</h3>
        </li>
    </ul>
</div>

SCSS

.nav-bar{
    position: fixed;
    z-index: 1;

ul{
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;

    li{
        transform: rotate(-90deg);
        list-style: none;
        text-align: center;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        margin-top: 3rem;
        padding: 7px 20px;

        &:hover{
            cursor: pointer;
            filter: invert(14%) sepia(83%) saturate(6538%) hue-rotate(2deg) brightness(100%) contrast(120%);
        }

        &#home{
            background-image: url(/public/links_bg/links_bg1.png);

        }
        &#video{
            background-image: url(/public/links_bg/links_bg2.png);
        }
        &#artworks{
            background-image: url(/public/links_bg/links_bg3.png);
        }
        &#blogs{
            background-image: url(/public/links_bg/links_bg4.png);
        }
        &#social{
            background-image: url(/public/links_bg/links_bg5.png);
        }

        h3{
            color: #E619D1;
            &:hover{
                color: #000;
                z-index: 10;
            }
        }
    }
}

}

标签： htmlfiltersasshoverbackground-image