Here are the facts:
I have a rounded div that contains a rounded SVG element that creates a circle.
Inside the circle (SVG), I draw four polygons that highlight the different quadrants of the circle.
Polygons react to hovering by changing color - so that when the user mouse is over a certain quadrant in a circle, it lights up.
SVG and divcontaining SVG have a overflow:hiddenCSS directive .
When the mouse is over an area outside the circle (but inside the cropped rectangle of the polygon) - the corresponding quadrant lights up ...
Why does the element respond to the mouse, even though I am hanging over the cropped area? How can I make sure this does not happen? (without creating occlusive transparent elements - I want to be able to touch something in the layer below ...).
EDIT:
added fiddle on request:
http://jsfiddle.net/JVQD8/
In the fiddle - note that the surrounding div borders the red line. polygons (in blue) are cropped with a red border (div), and when you hover over a polygon, it will become a lighter shade of blue. The polygon is highlighted outside the red border of the circle, if on the polygon.
Edit:
As Robert Longson commented, there are no problems in Firefox. However, in chrome, the problem is the same as described, and in IE the SVG polygon does not even respond to a hang.
, - . , , , ?