点击带有Alpha通道的div

Question

我正在尝试在Feed小部件的底部复制twitter的“淡出”图层（在twitter.com的主页上）。

我想出的唯一没有使用html5的方法就是在feed div上面放置一个绝对定位的div，并给它一个alpha通道的png，上面有一个白色到透明的渐变。这很容易实现。

现在唯一的问题是透明图层下方显示的div不可点击。 有关如何使div可点击的任何想法？也许你有另一种方法可以完全复制这种效果？

谢谢！

Answer 1

本文介绍了一种捕获onclick事件的方法，并通过暂时隐藏叠加层，重新点击，然后再次取消隐藏来处理它。隐藏不应该对最终用户可见。

Forwarding Mouse Events Through Layers：

  

  
1. textarea（我的掩蔽元素）那个   位于网格上方   mouseover，mousemove，mousedown，   mouseup和其他事件。
  
2. 顶部   掩蔽层隐藏片刻，   所以我们可以弄清楚是什么元素   在活动地点的面具下方。
  
3. 该事件被重新启动 - 这是在哪里   W3 DOM事件模型和更简单   微软相当于发挥作用。
  
4. 再次启动流程 - 准备好了   下一个活动。
  

编辑：我认为Twitter所做的事实上要简单得多。有一个从SVG借来的CSS属性已经实现了很多浏览器。

.overlay { pointer-events: none; }

Firefox 3.6 +，Safari 4和谷歌浏览器目前支持此功能 - 因此，如果您对仅在这些浏览器上工作感到满意，那么这是一个更简单的选项，其附加优势在于它适用于悬停事件也是，不只是点击事件。

Answer 2

对于IE，只需将底部div或layer设置为使用否定索引，如下所示：

{pointer-events: none; z-index: -100}