.rate_widget {
border: 1px solid #CCC;
overflow: visible;
padding: 10px;
position: relative;
width: 180px;
height: 32px;
}
.ratings_stars {
background: url('http://i52.tinypic.com/242a0qq.png') no-repeat;
float: left;
height: 28px;
padding: 2px;
width: 32px;
}
.ratings_vote {
background: url('http://i51.tinypic.com/23uu3o1.png') no-repeat;
}
.ratings_over {
background: url('http://i52.tinypic.com/2qvfg5h.png') no-repeat;
}
<div class=‘rate’>
How accurate was the item description?
<div id=“q1” class=“rate_widget”>
<div class=“star_1 ratings_stars” id=“1”></div>
<div class=“star_2 ratings_stars” id=“2”></div>
<div class=“star_3 ratings_stars” id=“3”></div>
<div class=“star_4 ratings_stars” id=“4”></div>
<div class=“star_5 ratings_stars” id=“5”></div>
</div>
</div>
[removed]
$(’.ratings_stars’).hover(
// Handles the mouseover
function() {
$(this).prevAll().andSelf().addClass('ratings_over');
$(this).nextAll().removeClass('ratings_vote');
},
// Handles the mouseout
function() {
$(this).prevAll().andSelf().removeClass('ratings_over');
}
);
rating_stars= some img of stars
ratings_over = another img of stars
ratings_vote = another imf of stars
Please help me in adding the click functionality to these stars. I am really confused as how to do it. How will I store these values of stars in my database?