渐变元素的渐变

Question

我想在滑块的两侧添加渐变图层。

所以我有这段代码：

<div>
    <div id="gradientsx">
    </div>
    <ul class="slider">
        <li>item 1</li>
        [...]
    </ul>
    <div id="gradientdx">
    </div>
</div>

.gradientsx有渐变的背景，他的postision是绝对的。但是<ul>也必须有一个绝对位置（允许滑动），所以渐变x中的格言变得不可见。我该如何解决这个问题？

以下是示例：http://jsfiddle.net/tPMuA/3/

Answer 1

您可以使用z-index强制在项目顶部使用shadow-div。但要注意，如果鼠标事件位于项目之上，它也可能会阻止鼠标事件。但是不确定这是否是一个问题，因为我无法从那个小提琴中找出滑块的样子。

http://jsfiddle.net/tPMuA/7/