CODEWITHSUNDEEP
jqueryhtmlcss
woj_jas
woj_jas

Reputation: 1088

Star Rating system on hover

I'm trying to write simple star rating system with html , css and jquery. The Tricky part is that i'm getting each star from my cms and when I give class to 1 star , next stars will have the same class so i don't know how to make them light up like in example. The question is how to make all stars before light up like here

http://css-tricks.com/star-ratings/

My html code:

<a class="rating" href="javascript:return false" onclick="star(1,6206,5,1,1431)"><span>★</span></a>
<a class="rating" href="javascript:return false" onclick="star(1,6206,5,1,1431)"><span>★</span></a>
<a class="rating" href="javascript:return false" onclick="star(1,6206,5,1,1431)"><span>★</span></a>
<a class="rating" href="javascript:return false" onclick="star(1,6206,5,1,1431)"><span>★</span></a>
<a class="rating" href="javascript:return false" onclick="star(1,6206,5,1,1431)"><span>★</span></a>

and some css: 

    .rating {
  unicode-bidi: bidi-override;
  direction: rtl;
  text-align: center;
}
.rating > span {
  display: inline-block;
  position: relative;
  width: 1.1em;
  color:green;
}
.rating > span:hover,
.rating > span:hover ~ span {
  color: transparent;
}
.rating > span:hover:before,
.rating > span:hover ~ span:before {
   content: "\2605";
   position: absolute;
   left: 0; 
   color: gold;
}

And Jsfiddle http://jsfiddle.net/5BbZh/

Upvotes: 0

Views: 2210

Answers (2)

LOTUSMS
LOTUSMS

Reputation: 10240

You have to adjust the sprite image so that it fits the container and there is no flickering. But other than that, it's all done. Also the stars I used are a hyperlink. Obviously you want to actually use an image in your root files.

DEMO HERE

Upvotes: 0

Pete
Pete

Reputation: 3254

Your HTML is incorrect. You need to wrap your anchors with a div with the class "rating". Then you need to fix your css to reflect the changes. I would recommend learning about CSS selectors to understand what is going on here.

Using a class called "star" will generalize it, so you are not restricted to just "anchors", but you can use any other inline-element.

Here is the fixed HTML:

<div class="rating">
  <a class="star" href="#" onclick="star(1,6206,5,1,1431)"><span>★</span></a>
  <a class="star" href="#" onclick="star(1,6206,5,1,1431)"><span>★</span></a>
  <a class="star" href="#" onclick="star(1,6206,5,1,1431)"><span>★</span></a>
  <a class="star" href="#" onclick="star(1,6206,5,1,1431)"><span>★</span></a>
  <a class="star" href="#" onclick="star(1,6206,5,1,1431)"><span>★</span></a>
</div>

Here is the adjusted CSS.

.rating {
  unicode-bidi: bidi-override;
  direction: rtl;
  text-align: center;
}
.rating > .star {
  display: inline-block;
  position: relative;
  width: 1.1em;
  color:green;
}
.rating > .star:hover,
.rating > .star:hover ~ .star {
  color: transparent;
}
.rating > .star:hover:before,
.rating > .star:hover ~ .star:before {
   content: "\2605";
   position: absolute;
   left: 0; 
   color: gold;
}

Here is the jsFiddle

Upvotes: 1

Related Questions