title: highlighting by div behind text
body: <p>I'd like to do text highlighting by hovering a <code>div</code> behind the text via z-index*.  If the element containing the text doesn't have a background, it works fine:</p>
  
  <p><img src="https://i.stack.imgur.com/pKluf.png" alt="enter image description here"></p>
  
  <p>However, if the element has a <code>background</code> or <code>background-color</code>, it doesn't work as the background blocks the view of the div that's behind it:</p>
  
  <p><img src="https://i.stack.imgur.com/6ryvg.png" alt="enter image description here"></p>
  
  <p>Of course I can make the div be on top, but that looks terrible, as it colors the text itself:</p>
  
  <p><img src="https://i.stack.imgur.com/q6nVi.png" alt="enter image description here"></p>
  
  <p>You can see this problem in action with jsfiddle <a href="http://jsfiddle.net/paleozogt/V3Kae/" rel="nofollow noreferrer">here</a>.  My question is: how can I have a <code>div</code> go <em>behind</em> the text but <em>above</em> the background?</p>
  
  <hr>
  
  <p>* Why am I not using a <code>span</code> like <a href="https://stackoverflow.com/questions/5149542/pretty-html-highlighting-using-span">everyone else</a>?  Because with <code>div</code> I can animate the highlighting's movement from word to word.  That's in the jsfiddle also.</p>