title: CSS Venn Diagram mouse hover
body: <p>I'm trying to create a pure css Venn diagram like this <img src="https://i.stack.imgur.com/lh2RB.gif" alt="Example of a Venn Diagram"></p>
  
  <p>Where the circle gets highlighted on mouse hover. But the problem is: using the <code>border-radius</code> property if I mouse over the corner of the circle (outside the circle) , it triggers hover as well.</p>
  
  <p>for a demo see <a href="http://jsfiddle.net/sLzUG/" rel="nofollow noreferrer">this jsfiddle link</a>  and hover over the red area</p>
  
  <p>is there any CSS solution to avoid this or am I ganna have to calculate it using javascript?</p>
  
  <p>EDIT: Thanks to all for the responses.
  I should have posted the browser information as well. I'm using Chrome 12
  So far it seems this bug exists in chrome. I will update this page with any further findings.</p>
  
  <p><strong>UPDATE Aug 2013:</strong> Just tested this again on Chrome 28 and the issue no longer exists.</p>