html - 单击带有 alpha channel 的 div

Question

我正在尝试在提要小部件的底部(在他们在 twitter.com 的主页上)复制 Twitter 的“淡出”层。

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

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

谢谢!

Answer 1

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

Forwarding Mouse Events Through Layers :

1. The textarea (my masking element) that is positioned over the grid receives mouseover, mousemove, mousedown , mouseup and other events.
2. The top masking layer is hidden for a moment, so we can figure out what element is below the mask at the event location.
3. The event is re-fired - this is where the W3 DOM Event model and the simpler Microsoft equivalent come into play.
4. Start the process again - ready for the next event.

编辑:我认为 Twitter 所做的实际上要简单得多。许多浏览器都实现了从 SVG 借用的 CSS 属性。

.overlay { pointer-events: none; }

目前 Firefox 3.6+、Safari 4 和 Google Chrome 都支持它 - 所以如果您希望它只在这些浏览器上工作，那么这是一个更简单的选项，还有一个额外的优势，那就是它适用于悬停事件也不仅仅是点击事件。