CSS achieve dynamic display by the five-pointed star-level results
Perhaps you see above this paragraph some Shengse, no, let us have a look at css code solution
<ul Class="star-rating">
<li Class="current-rating"> Currently 3.5 / 5 Stars. </ Li>
<li> <a Href="#" title="1 star out of 5" class="one-star"> 1 </ a> </ li>
<li> <a Href="#" title="2 stars out of 5" class="two-stars"> 2 </ a> </ li>
<li> <a Href="#" title="3 stars out of 5" class="three-stars"> 3 </ a> </ li>
<li> <a Href="#" title="4 stars out of 5" class="four-stars"> 4 </ a> </ li>
<li> <a Href="#" title="5 stars out of 5" class="five-stars"> 5 </ a> </ li>
</ Ul>
<style>
. Star-rating (/ * This is stratified air, air to display the stars * /
List-style: none;
Margin: 0px;
Padding: 0px;
Width: 150px;
Height: 30px;
Position: relative;
Background: url (star_rating2.gif) top left repeat-x; / * Air stars in the top background picture, and its background as a horizontal tiled * /
)
. Star-rating li (/ * Set up li floating attribute * /
Padding: 0px;
Margin: 0px;
/ * \ * /
Float: left;
/ * * /
)
. Star-rating li a (/ * Set up a layout for the absolute and layout and vertical coordinates of the hide into a Chinese air link * /
Display: block;
Width: 30px;
Height: 30px;
Text-decoration: none;
Text-indent:-9000px;
Z-index: 20;
Position: absolute;
Padding: 0px;
)
. Star-rating li a: hover (/ * Set up a: hover in the background picture for the points Star / vertical coordinates / left for 0, attention must be less than the vertical coordinates of the vertical coordinates of a * /
Background: url (star_rating2.gif) left center;
Z-index: 2;
Left: 0px;
)
/ * The following five class used to set up five locations and links to hover width * /
. Star-rating a.one-star (
Left: 0px;
)
. Star-rating a.one-star: hover (
Width: 30px;
)
. Star-rating a.two-stars (
Left: 30px;
)
. Star-rating a.two-stars: hover (
Width: 60px;
)
. Star-rating a.three-stars (
Left: 60px;
)
. Star-rating a.three-stars: hover (
Width: 90px;
)
. Star-rating a.four-stars (
Left: 90px;
)
. Star-rating a.four-stars: hover (
Width: 120px;
)
. Star-rating a.five-stars (
Left: 120px;
)
. Star-rating a.five-stars: hover (
Width: 150px;
)
. Star-rating li.current-rating (/ * Set up scores of the background and the width and hidden text * /
Background: url (star_rating2.gif) left bottom;
Position: absolute;
Height: 30px;
Width: 105px;
Display: block;
Text-indent:-9000px;
Z-index: 1;
)
</ Style>
After reading these, I believe you should be aware that one of the tenets of the bar, or if I do not understand the message can be, or perhaps I write not good enough:)
A total of two. 9 7 1 2
Tags: css display, Display
Leave a Reply