单击带有alpha通道的div

Question

我正在尝试将twitter的“淡出”层复制到feed小部件的底部(在twitter.com的主页上)。

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

现在唯一的问题是透明层下面的div是不可点击的。关于如何让div可点击有什么想法吗？也许你有另一种方法可以完全复制这种效果？

谢谢!

Answer 1

本文描述了一种捕获onclick事件的方法，并通过暂时隐藏覆盖，重新触发单击，然后再次取消隐藏来处理它。隐藏不应该对最终用户可见。

Forwarding Mouse Events Through Layers：

1. 位于网格上的文本区域(我的掩码元素)接收mouseover、mousemove、mousedown、mouseup和其他事件。
2. 顶层屏蔽层暂时被隐藏，因此我们可以找出事件位置的屏蔽层下面是什么元素。
3. 事件被重新激发-这就是W3 DOM事件模型和更简单的微软等效模型发挥作用的地方。
4. 再次启动该过程-为下一个事件做好准备。

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

.overlay { pointer-events: none; }

目前火狐3.6+、Safari4和谷歌Chrome都支持这一功能--所以如果你很高兴它只在这些浏览器上运行，那么这是一个简单得多的选项，而且它的优点是它也适用于悬停事件，而不仅仅是点击事件。

Answer 2

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

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