How can I best implement rollover and rollout events for multiple overlapping elements?
<h2>Problem:</h2>

<p>I'm working on a website where there is a "dial" that displays a number of tabs representing different divisions of an umbrella company:</p>

<p><img src="http://i.stack.imgur.com/qDlOr.png" alt="enter image description here"></p>

<p>At the moment I have everything prepared in HTML/CSS (positioning of each of the tabs). The inner circles are on a higher <code>z-index</code> as the tabs will need to animate outward when rolled over (I can achieve this part). The images for the tabs actually look like this:</p>

<p><img src="http://i.stack.imgur.com/o8xms.png" alt="enter image description here"></p>

<p>Unfortunately it didn't occur to me until now that because of the mechanics of rollover and rollout in JavaScript, the boundaries for each item are square, meaning they overlap all over the place. For example, the centre circle's rollover area is actually this:</p>

<p><img src="http://i.stack.imgur.com/1We9C.png" alt="enter image description here"></p>

<p>Which detracts some massive clickable/rolloverable areas on the inner circle of tabs. This effect then stacks with each of the tabs, rendering a standard approach non-viable.</p>

<hr>

<h2>Approach:</h2>

<p>This is fine, what I plan to do now is measure the distance and angle of the mouse from the centre of the dial and use these values to determine the relevant tab, and work from there. I'll basically do the following:</p>

<ol>
<li>Collect <code>angle</code> (using atan2) and <code>distance</code> (using pythag).</li>
<li>Apply my <code>.click()</code> to the entire dial, and work with these values from there.</li>
<li>Use <code>setInterval()</code> to constantly check which item is rolled over and work with its animation from there.</li>
</ol>

<hr>

<h2>Question:</h2>

<p>I'm not exactly sure how to implement what I am doing (with JQuery). I know how to do all the <code>Math</code> stuff once I have the coordinates that I need, I'm just not confident in getting the actual coordinates (ensuring the same results cross-browser).</p>

<p>How can I best gather the coordinates of:</p>

<ol>
<li>The centre of my dial.</li>
<li>The cursor (assuming that the cursor is within the same axis as the centre of my dial i.e. rolling over the centre of the dial will mean both sets of coordiantes are the same).</li>
</ol>

<hr>

<h2>Note:</h2>

<p>Taking the above, anything that achieves the same result (being able to have proper rollover detection for overlapping elements) is equally as helpful.</p>
