html – 使用Alpha通道点击div

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

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

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

谢谢!

解决方法

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

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

猜你在找的HTML相关文章