Click on a link under div with border-radius

Question

so I have a link that is displayed under a div. This is a circle using border-radius property. However, when I move the cursor over this link, it behaves just like that div is still a square and I can't click through.

I can listen for JavaScript click event and work some math to do this, but I hope there is another way that I just don't see.

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;
}

Demo: http://jsfiddle.net/D4R9C/1/

Works as expected in Firefox and IE9.
Works as described above in Chrome 23, Safari 5 and Opera 11.5.

Thanks for any advice.

Answer 1

Click through a DIV to underlying element works different in browsers. Opera needs manual event forwarding, Firefox and Chrome understand CSS pointer-events:none; and IE doesn't need anything with transparent background; with eg background:white; opacity:0; filter:Alpha(opacity=0); IE needs forwarding like Opera.

See forwarding test at http://caniuse.com/pointer-events . Pointer-events CSS property has been moved from CSS3-UI to CSS4-UI.