JQuery - Make my script work?
- by JasonS
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;');
}
});
