title: show text that is wider than the container, problems scrolling
body: <p>I have list elements that have no-wrap. These are inside a list that is in a fixed-size div with <code>overflow:hidden;overflow-y:auto</code> so that it is able to scroll. Text is cropped to the right as you would expect.</p>
  
  <p>I am trying to show the "long" version of text that overflows a div as you mouse over. This relies pretty much on</p>
  
  <pre><code>if (0 &gt; e.target.clientWidth - e.target.scrollWidth) {
  </code></pre>
  
  <p>(where <code>e.target</code> is the <code>LI</code> in a mouseover event).</p>
  
  <p>Here's the basic principal working like I want (warning: ugly hack, improvements welcomed).</p>
  
  <p><a href="http://jsfiddle.net/h3yzhby0/" rel="nofollow">http://jsfiddle.net/h3yzhby0/</a></p>
  
  <p>However, I'm stuck with scrolling. When I mouse over the element, it's added to the body since that is higher in z-order than the wrapper div (it's after it in dom and has a position:fixed) - it appears above the scrollbar for the div, as I need. When the mouse is over this element, I want the mouse wheel [and keyboard arrows which I haven't yet coded] to continue to scroll the div up and down. The event doesn't "bubble" from the mouse-over div because it's not of the same parent / node (and can't be, because of the overflow requirement).</p>
  
  <p>Is there a way to pass or re-trigger the mousewheel event on a specific object (e.g. pass the event) ?</p>