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指针事件：无; IE不需要任何透明背景的东西;与...背景：白色;不透明度：0;滤波器：阿尔法（不透明度= 0）; IE需要转发，如Opera。

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

单击带有border-radius的div下的链接

1 个答案: