StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>I found a <a href="http://www.komodomedia.com/blog/2007/01/css-star-rating-redux/" rel="nofollow">great CSS only way of doing the hover effects</a>. The keeping the stars highlighted will still require some javascript, but much less. </p> <p>The general idea is that you have a background image (the star) for the ul with a set length (in your case, 5 time the width of the image, for 5 stars) and repeat the image across the x-axis (<code>background: url(star.gif) repeat-x;</code>). Each <code><a></code> is set to different widths (20%, 40%, 60%, 80%, 100%, for the 5 stars) and is put on a different z-index.</p> <p>Here's an update of the author's idea that's a little closer to your use case:</p> <p>HTML:</p> <pre><code><div class='rate_widget'> <ul> <li><a href='#' class='one-star'>1</a></li> <li><a href='#' class='two-stars'>2</a></li> <li><a href='#' class='three-stars'>3</a></li> <li><a href='#' class='four-stars'>4</a></li> <li><a href='#' class='five-stars'>5</a></li> </ul> </div> </code></pre> <p>CSS:</p> <pre><code>.rate_widget ul{ background: url(star_empty.png) repeat-x; } .rate_widget a:hover{ background: url(star_highlight.png) repeat-x; } .rate_widget a:active, .rate_widget a:focus, .rate_widget a.checked{ background: url(star_full.png) repeat-x; } .rate_widget ul{ position:relative; width:125px; /*5 times the width of your star*/ height:25px; /*height of your star*/ overflow:hidden; list-style:none; margin:0; padding:0; background-position: left top; } .rate_widget li{ display: inline; } .rate_widget a{ position:absolute; top:0; left:0; text-indent:-1000em; height:25px; /*height of your star*/ line-height:25px; /*height of your star*/ outline:none; overflow:hidden; border: none; } .rate_widget a.one-star{ width:20%; z-index:6; } .rate_widget a.two-stars{ width:40%; z-index:5; } .rate_widget a.three-stars{ width:60%; z-index:4; } .rate_widget a.four-stars{ width:80%; z-index:3; } .rate_widget a.five-stars{ width:100%; z-index:2; } .rate_widget a.checked{ z-index:1; } </code></pre> <p>Javascript:</p> <pre><code>$('.rate_widget a').click(function(){ // make sure the chosen star stays selected var star = $(this); star.closest('ul').find('.checked').removeClass('checked'); star.addClass('checked'); //whatever else you want to do when something gets clicked }); </code></pre> <p>And here's a fiddle to see it in action: <a href="http://www.jsfiddle.net/BHaTu/" rel="nofollow">http://www.jsfiddle.net/BHaTu/</a></p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload