Click the link below the div with a border radius

Question

so I have a link that appears under the div. This is a circle using the border-radius property. However, when I move the cursor over this link, it behaves the same as the one that is still square, and I cannot click.

I can listen to the JavaScript click and work on some math, 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.
It works as described above in Chrome 23, Safari 5, and Opera 11.5.

Thanks for any advice.

Answer 1

Clicking through the DIV on the base element works in browsers. Opera requires manual event forwarding; Firefox and Chrome understand CSS event pointers: none; and IE doesn't need anything with a transparent background; with. background: white; Opacity: 0; Filter: alpha (opacity = 0); IE needs redirection, like Opera.

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