具有 alpha 通道的可点击 div

Question

我试图复制Twitter主页中动态消息展示窗口底部的“淡出”层效果。

我想到的唯一不使用html5的方法是：将一个绝对定位的div置于消息展示窗口上方，并给它一个带有从白色到透明的渐变的alpha通道png图片，这很容易实现。

但问题是，出现在透明层下面的div不可点击。您有什么办法使这些div可点击吗？也许您有另一种完全复制这种效果的方法？

谢谢！

- Shmulik

---

你有一个例子可以说明吗？比如一小段代码片段？ - JamesStuddart

Answer 1

本文描述了一种捕获onclick事件并通过短暂隐藏覆盖层、再次触发点击事件，然后再次显示的方法。此时隐藏对最终用户不可见。

穿透图层转发鼠标事件：

1. 位于网格上方的文本区域（即我的遮罩元素）接收mouseover、mousemove、mousedown、mouseup和其他事件。
2. 在一段时间内隐藏顶部遮罩层，以便我们可以确定事件位置下面的元素是什么。
3. 重新触发事件-这是W3 DOM事件模型和较简单的Microsoft等效模型发挥作用的地方。
4. 准备好下一个事件，开始整个过程。

编辑：我认为Twitter所做的实际上更简单。有一项从SVG借来的CSS属性已经被许多浏览器实现了。

.overlay { pointer-events: none; }

这目前被Firefox 3.6+、Safari 4和Google Chrome支持 - 所以如果你只想让它在这些浏览器上工作，那么这是一个更简单的选择，而且它也可以用于悬停事件，而不仅仅是点击事件。

- Nick

---

谢谢！Twitter的版本在IE上也能运行，所以他们可能正在执行你最初建议的操作。我会尝试一下。 - Shmulik

我刚试了一下IE8，当它在蓝色渐变层下面时，我无法点击任何东西。你用的是哪个版本？ - Nick

没错，它在IE中不起作用。不确定为什么我认为它会（可能是我在渐变区域外单击了）。所以这就解决了 - 他们使用pointer-events属性。再次感谢 :) - Shmulik

Answer 2

对于IE浏览器，只需将底部的div或layer设置为使用负指数，像这样：

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

- tk416

---

设置 z-index 会使元素处于后面，这违背了使用遮罩的初衷。 - John Nelson