【问题标题】:Make 3d-translated element clickable使 3d 翻译的元素可点击
【发布时间】:2012-08-22 10:57:31
【问题描述】:

我在一个 wrapper-div 中有两个 div。 第一个通过 translate3d(50px, 50px, 50px) 定位在包装器的前面, 第二个通过 translate3d(50px, 50px, -50px) 定位在包装器后面。

我想将点击事件绑定到内部 div,但我无法点击位于包装器后面的 div。有人知道这个问题的解决方案吗?

js-fiddle(仅限 webkit):http://jsfiddle.net/rttmax/zrgdQ/16/

谢谢。 rttmax

【问题讨论】:

  • 你的 JSFiddle 在 Chrome 20 上为我工作......当我点击红色或绿色矩形时,它们都会对该点击做出反应
  • 哇,有趣的是,当我重新打开同一页面时,它停止了工作:D
  • ja。有时它正在工作。大多数时候不是。
  • 当我用 $(document).ready() 包装你的 live() 绑定并将负转换从原来的 -50px 更新到 -43px 时,它总是有效 - 也许你可以尝试解决从那时起?
  • 哇,所以当我 fork 那个 JS 并试图分享它时它不再工作了,它又回到了不工作状态,sry

标签: jquery events css click translate3d


【解决方案1】:

你必须给你的 wrapper DIV 一个正的 50px Z 值来补偿负的 50px。

http://jsfiddle.net/zrgdQ/108/

【讨论】:

  • 这需要标记为答案。正是我在 Chrome 和 Safari 中修复转换所需要的。
猜你喜欢
  • 1970-01-01
  • 2014-03-24
  • 1970-01-01
  • 2018-07-13
  • 2012-05-24
  • 2011-12-29
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多