HTML中的对角可点击块

Question

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

我愿意用JS / Jquery IF解决这个问题。

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

提前致谢！

解决方案 这只是我实际上做的一个摘录，所以代码有点乱，但是你走了。 如下所述，我决定采用CSS3路线，因为它反正优雅地降级。

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

Answer 1

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

skewX examples

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

Answer 2

我读过你不能使用CSS3，因为你需要支持IE。

您可以使用matrix filters在IE6中向上倾斜。不知道如何处理交互性，但值得一试。

您可以使用此工具轻松将偏斜转换为IE滤镜矩阵：

http://www.useragentman.com/IETransformsTranslator/

（不在Chrome中工作，使用Firefox）。

如果处理好交互性，那么过滤器+ CSS3偏斜可以实现您所需要的（主要是）跨浏览器。

Answer 3

您可以使用<area>标记指定任何形状的坐标，不需要CSS3 - 请参阅此处：http://www.tutorialspoint.com/html/html_area_tag.htm

Answer 4

正如Oddant所说，transform: skew()可能是你最好的选择，如果你可以依赖CSS3。

另一方面，如果你不能假设CSS3支持，或者你需要不框的内容歪斜，那么你只能在{{{{{{ 3}}

Answer 5

我假设你知道你所有形状的坐标，所以你可以让你的父元素在点击，鼠标移动或其他任何事件上发生冲突，并使用一点点数学来确定鼠标当前是哪个元素in。我不能说我知道如何确定一个点是否像我头顶那样的形状，但我确定它有一个。