html – 使用Alpha通道点击div

前端之家收集整理的这篇文章主要介绍了html – 使用Alpha通道点击div前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在尝试在Feed小部件的底部复制twitter的“淡出”图层(在twitter.com的主页上).

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

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

谢谢!

解决方法

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

Forwarding Mouse Events Through Layers

@H_502_15@
  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和谷歌浏览器都支持这一功能 – 所以如果你很高兴它只能在这些浏览器上工作,那么这是一个更简单的选项,还有一个额外的优势,它也适用于悬停事件,而不仅仅是点击活动.

原文链接:https://www.f2er.com/html/227696.html

猜你在找的HTML相关文章