title: Rotating an element based on cursor position in a separate element
body: <p>I've been Working on a breadcrumbs directory feature recently that requires an element to rotate based on the cursor x position within the breadcrumbs container element. Long story short, I need the arrow in the lower '#pointer-box' to always point at the cursor when it's within the '#target-box'. </p>
  
  <p>I'm looking for two separate formulas that will a.) set the initial left-most position of the arrow when the '#target-box' cursor x position is at 0, and b.) keep the arrow's left-most and right-most rotation properties proportional at any browser width or on window resize. </p>
  
  <p>Any help is greatly appreciated.</p>
  
  <p>Here's the live demo. <a href="http://jsfiddle.net/HeFqh/" rel="noreferrer">http://jsfiddle.net/HeFqh/</a></p>
  
  <p>Thank you</p>
  
  <p><strong>Update</strong></p>
  
  <p>With help from Tats_innit I was able to get the arrow pointing at the cursor when it's inside the '#target-box'. Now I have two specific issues to solve.</p>
  
  <p>a.) When the window is resized the arrow and cursor are no longer aligned.</p>
  
  <p>b.) The 'var y' on 'mousemove' is not deducting the top offset</p>
  
  <pre><code>var y = e.pageY - this.offsetTop
  </code></pre>
  
  <p>The updated live demo. <a href="http://jsfiddle.net/HeFqh/11/" rel="noreferrer">http://jsfiddle.net/HeFqh/11/</a></p>
  
  <p>Thank you</p>