时间戳

首页 > 解决方案 > 应用覆盖时无法访问列表项

html - 应用覆盖时无法访问列表项

问题描述

我正在尝试克隆此站点中的列表项：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>

标签： htmlcssoverlay

解决方案

只需添加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>

推荐阅读