javascript - HTML 中的对 Angular 线可点击 block

Question

我需要让白色 block 响应点击和悬停事件，但众所周知，DOM 都是矩形 block 。所以我真的不确定如何处理这个问题。对 Angular 线使它变得困难，因为我不能只在 img 元素上放置负边距并重叠它们，因为这样可点击区域就会重叠。

如有必要，我愿意使用 JS/Jquery 解决问题。

编辑:不幸的是，我不能完全依赖 CSS3。

提前致谢!

解决方案 这只是我实际所做的摘录，所以它在代码方面有点困惑，但现在就开始吧。 如下所述，我决定采用 CSS3 路线，因为它无论如何都会优雅地降级。

演示: http://jsfiddle.net/4Vgdu/1/

Answer 1

您可以使用 css3 转换属性的 skewX 属性:

skewX examples

然后在转换后的 div 上应用 mousemove 事件