title: Activate ':hover' only when mouse moves down list and remove when mouse moves up
body: <p>So I have to implement a Jquery function in which every <code>li</code> Element is executing the <code>:hover</code> pseudo class (which only changes the background color). So if I hover down to the 4th Element ALL previous <code>li</code> Elements (1st, 2nd, 3th) should have the changed background color from the <code>:hover</code> pseudo class!! But if I move up with the mouse again the <code>:hover</code> effect should disappear (normal background color again) up to the point where my mouse is (if it is on 2nd element only 1st and 2nd have the hover effect now) ... I have absolutely no idea how I can create such a method... I did something like</p>
  
  <pre><code>$('ul li').on('mouseenter') { 
  $(this).addClass('hover'); //alternatively $(this).css('background-color', 'grey'); 
  }
  </code></pre>
  
  <p>but it does not remove any <code>:hover</code> effect and it makes failures possible like that only the first and the 5th <code>li</code> Element have the <code>:hover</code> effect but all in between remain normal which I don't want... Could you please help me?</p>