html – 使用Alpha通道点击div

概述我正在尝试在feed小部件的底部复制twitter的“淡出”图层(在twitter.com的主页上). 我想出的唯一没有使用html5的方法就是在feed div之上放置一个绝对定位的div,并给它一个alpha通道的png,上面有一个白色到透明的渐变.这很容易实现. 现在唯一的问题是透明层下面出现的div不可点击. 有关如何使div可点击的任何想法？也许你有另一种方法可以完全复制这种效果？ 谢谢 我正在尝试在Feed小部件的底部复制twitter的“淡出”图层(在twitter.com的主页上).

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

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

谢谢！

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

Forwarding Mouse Events Through Layers：

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

编辑：我认为Twitter的作用实际上要简单得多.有一个从SVG借来的CSS属性已经实现了一堆浏览器.

.overlay { pointer-events: none; }

目前firefox 3.6,Safari 4和谷歌浏览器都支持这一功能 – 所以如果你很高兴它只能在这些浏览器上工作,那么这是一个更简单的选项,还有一个额外的优势,它也适用于悬停事件,而不仅仅是点击活动.

总结

以上是内存溢出为你收集整理的html – 使用Alpha通道点击div全部内容，希望文章能够帮你解决html – 使用Alpha通道点击div所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。