Hi,

I have written a script. It does work! It's just a bit rubbish. Could someone tell me where I am going wrong.

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.

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.

$(".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 < 20) {
        $(this).attr('style', 'background-position:0;');    
    } else if (actLeft < 40) {
        $(this).attr('style', 'background-position:0 -20px;');
    } else if (actLeft < 60) {
        $(this).attr('style', 'background-position:0 -40px;');
    } else if (actLeft < 80) {
        $(this).attr('style', 'background-position:0 -60px;');
    } else {
        $(this).attr('style', 'background-position:0 -80px;');
    }
});