JQuery - Make my script work?
<p>I have written a script. It does work! It's just a bit rubbish. Could someone tell me where I am going wrong.</p>

<p>Basically, I have a 5 star rating box. When the mouse hovers over the various parts of the box I need the stars to change.</p>

<p>Currently the stars only change when you move your mouse over and out of the element. I need the stars to change while the mouses within the element. I think the problem is with the event but I have tried a couple and it seems to make no difference.</p>

<pre><code>$(".rating").mouseover(function(e) {
    // Get Element Position
    var position = $(this).position();
    var left = position.left;

    // Get mouse position
    var mouseLeft = e.pageX;

    // Get Actual
    var actLeft = mouseLeft - left;

    $(".info").html(actLeft);

    if (actLeft &lt; 20) {
        $(this).attr('style', 'background-position:0;');    
    } else if (actLeft &lt; 40) {
        $(this).attr('style', 'background-position:0 -20px;');
    } else if (actLeft &lt; 60) {
        $(this).attr('style', 'background-position:0 -40px;');
    } else if (actLeft &lt; 80) {
        $(this).attr('style', 'background-position:0 -60px;');
    } else {
        $(this).attr('style', 'background-position:0 -80px;');
    }
});
</code></pre>
