单击带有 border-radius 的 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。