css - 我怎样才能在可点击的内容上使用渐变 CSS？

Question

我有一个只能在 x 方向滚动的水平图像列表。在右侧的末尾有一个 css 渐变以显示还有更多内容。 (滚动条将被删除并且可能不明显是可滚动的内容)

我已将光标更改为列表项上的指针，以表明如果单击它们将导致不同的页面。渐变后面的右侧被光标更改挡住了，z-index 不会解决这个问题。

非常感谢任何帮助!

.gradient{
    /*background: -moz-linear-gradient(left center, transparent, white);*/
          /* webkit example */
        background-image: -webkit-gradient(
          linear, right top, left top, from(rgba(255, 255, 255, 1.0)),
          to(rgba(255, 255, 255, 0))
        );

        /* mozilla example - FF3.6+ */
        background-image: -moz-linear-gradient(
          right center,
          rgba(255, 255, 255, 1.0) 20%, rgba(255, 255, 255, 0) 95%
        );

        /* IE 5.5 - 7 */
        filter: progid:DXImageTransform.Microsoft.gradient(
          gradientType=1, startColor=0, endColorStr=#FFFFFF
        );

        /* IE8 uses -ms-filter for whatever reason... */
        -ms-filter: progid:DXImageTransform.Microsoft.gradient(
          gradientType=1, startColor=0, endColoStr=#FFFFFF
        );

example here

Answer 1

您可以在渐变 div 上设置 css 属性 pointer-events: none。这应该可以解决它。