click - 单击带有边框半径的 div 下的链接

Question

所以我有一个显示在 div 下的链接。这是一个使用border-radius 属性的圆。但是，当我将光标移到这个链接上时，它的行为就像那个 div 仍然是一个正方形，我无法点击。

我可以监听 JavaScript 点击事件并做一些数学运算来做到这一点，但我希望还有另一种我看不到的方法。

a {
    display: block;
    width: 600px;
    height: 150px;
    background: yellow;
}

a:hover {
    color: yellow;
    background: blue;
}

div {
    width: 250px;
    height: 250px;
    margin-top: -100px;
    overflow: hidden;
    background: red;
    border-radius: 125px;
}

演示：http: //jsfiddle.net/D4R9C/1/

在 Firefox 和 IE9 中按预期工作。
在 Chrome 23、Safari 5 和 Opera 11.5 中按上述方式工作。

感谢您的任何建议。

Answer 1

单击 DIV 到底层元素在浏览器中的工作方式不同。Opera 需要手动事件转发，Firefox 和 Chrome 理解 CSS pointer-events:none；并且 IE 不需要任何具有透明背景的东西；例如背景：白色；不透明度：0；过滤器：Alpha（不透明度=0）；IE 需要像 Opera 一样转发。

请参阅http://caniuse.com/pointer-events上的转发测试。Pointer-events CSS 属性已从 CSS3-UI 移至 CSS4-UI。