在overlay div中无法链接的链接

时间:2014-06-16 20:18:04

标签: html css hyperlink overlay pointer-events

我已经创建了四个div(绝对定位),以便我能够围绕同一个中心旋转它们。问题是,我在每个div中都有一个链接,因此不再工作(不可能点击)。 我设法让他们在Firefox中使用“pointer-events:none;”在div和“指针事件:汽车;”在链接上。不幸的是,这仅适用于Firefox。 所以我想知道是否有人有另一个解决方案(可能没有JavaScript)来实现Safari和Chrome中的链接(可能还有IE)。

HTML:

<div id="one"><a href="#">Link one</a></div>
<div id="two"><a href="#">Link two</a></div>
<div id="three"><a href="#">Link three</a></div>
<div id="four"><a href="#">Link four</a></div>

CSS:

#one, #two, #three, #four {
    height: 100px;
    width: 100px;
    position: absolute;
}

#one {
    transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
}

#two {
    transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
}

#three {
    transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
}

这是jsFiddle:http://jsfiddle.net/jf6A5/

提前感谢您的帮助。

0 个答案:

没有答案