title: Highlight an element on hover
body: <p>I want to highlight an element on hover, and only that element. 
  This should mimic the behaviour of hovering  over an element with chrome dev tools when you have the magnifying glass selected. 
  It's for a chrome extension I'm making.</p>
  
  <p>I think I need a JS solution, as the pseudo :hover in css seems to apply to all elements in the background, i.e. container elements, so I'd need to prevent event bubbling in css, which as far as I can tell you can't do.</p>
  
  <p>I have tried </p>
  
  <pre><code>$('body').children().mouseover(function(e){
      $(".hova").removeClass("hova");     
      $(this).addClass("hova");
  }).mouseout(function(e) {
      $(this).removeClass("hova");
  });
  </code></pre>
  
  <p>-css-</p>
  
  <pre><code>.hova {
      background-color: pink;
  }
  </code></pre>
  
  <p>and jquery's hover(), both always selects the container too.</p>
  
  <p>I have also tried with css opacity, incase the background was covered, but it seems it always selects the parent element. I want the furthest child down the DOM that I am hovering over.</p>
  
  <p>I'm sure there's some simple solution out there, maybe its over complicating as its in a chrome extension... I'm not sure</p>