CSS to make star rating function

Source: Internet
Author: User
Keywords Web page production CSS Tutorials
Tags .url class code function javascript script simple text

Do a star rating function is not difficult, but to write a simple CSS estimate is a bit difficult, first screenshot:

The effect is very simple, maybe now you have the idea of a realization in mind. Let's take a look at how we normally implement this:

CSS:

Code
          Jsstar
         {   List-style:none;
            margin:0px;
            padding:0px;
            width:100px;
            height:20px;
            position:relative;
           
            }
         Jsstar li 
          {
             padding:0px;
            margin:0px;
            Float:left;
            width:20px;
            height:20px;
            Background:url (star_rating.gif) 0 0 No-repeat;
           } 
 

HTML:

<p>javascript + CSS Implementation </p>
<ul class= "Jsstar" >
<li title= "one star" ></li>
<li title= "Two Star" ></li>
<li title= "Samsung" ></li>
<li title= "Four Star" ></li>
<li title= "Five Star" ></li>
</ul>
JS: (I'm using jquery)

<script type= "Text/javascript" src= "Jquery-1.3.1.js" ></script>

<script type= "Text/javascript" >
$ (document). Ready (function () {
$ (". Jsstar >li"). Hover (
Function () {$ (this). css ({"background-position": "Left NRC"}). Prev (). Trigger ("MouseOver")},
Function () {$ (this). css ({"background-position": ' Left Top} '). Prev (). Trigger ("Mouseout")})
. Click (function () {Alert ($ (this). attr ("title")});
});
</script>

is not the same as the above, but another thought if the user banned JavaScript is not very bad effect?

So we think of using a pure CSS implementation, the following is the code:

CSS:

Code


1/*css Star start*/


2 star-rating


3 {


4 List-style:none;


5 margin:0px;


6 padding:0px;


7 width:100px;


8 height:20px;


9 position:relative;


Background:url (star_rating.gif) top left repeat-x;


11}


Star-rating Li


13 {


padding:0px;


margin:0px;


Float:left;


17}


star-rating Li a


19 {


Display:block;


width:20px;


height:20px;


Text-decoration:none;


text-indent: -9000px;


z-index:20;


Position:absolute;


padding:0px;


28}


star-rating li A:hover


30 {


Background:url (star_rating.gif) left NRC;


z-index:1;


left:0px;


34}


star-rating A.one-star


36 {


Notoginseng left:0px;


38}


star-rating A.one-star:hover


40 {


width:20px;


42}


star-rating A.two-stars


44 {


left:20px;


46}


star-rating A.two-stars:hover


48 {


width:40px;


50}


star-rating A.three-stars:hover


52 {


width:60px;


54}


star-rating A.three-stars


56 {


left:40px;


58}


star-rating A.four-stars


60 {


left:60px;


62}


star-rating A.four-stars:hover


64 {


width:80px;


66}


star-rating A.five-stars


68 {


left:80px;


70}


star-rating A.five-stars:hover


72 {


width:100px;


74


75}


HTML:

<ul class= ' star-rating '
  <li><a href= ' # ' title= ' one star ' class= ' One-star ' >1</a>< /li>
  <li><a href= ' # ' title= ' second star ' class= ' Two-stars ' >2</a></li>
  <li ><a href= ' # ' title= ' Samsung ' class= ' Three-stars ' >3</a></li>
  <li><a href= ' # ' title = ' Four star ' class= ' Four-stars ' >4</a></li>
  <li><a href= ' # ' title= ' five-star ' class= ' Five-stars ' >5</a></li>
</ul>
Take a look at the line number of the above CSS are you surprised that this simple effect uses so much code? In my opinion without JS can only one effect a style, if you have more simple and more dazzling effect please advise!

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.