html - 应用叠加时无法访问列表项

Question

我正在尝试克隆此站点中的列表项:https://www.udemy.com/courses/search/?src=ukw&q=photoshop&persist_locale=&locale=en_US

一切都很顺利，直到我添加了叠加层。它阻止我点击该链接。有人有解决办法吗？

ul{
    position: relative;
}
ul:after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: linear-gradient(transparent 10%, rgba(255,255,255,.7) );
}

<ul>
    <li><a href="">Item1</a></li>
    <li><a href="">Item2</a></li>
    <li><a href="">Item3</a></li>
    <li><a href="">Item4</a></li>
    <li><a href="">Item5</a></li>
</ul>

Answer 1

只需添加 pointer-events:none 即可访问叠加层下的元素

ul{
    position: relative;
}
ul:after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: linear-gradient(transparent 10%, rgba(255,255,255,.7) );
    pointer-events:none;
}

<ul>
    <li><a href="">Item1</a></li>
    <li><a href="">Item2</a></li>
    <li><a href="">Item3</a></li>
    <li><a href="">Item4</a></li>
    <li><a href="">Item5</a></li>
</ul>