How to create rating system using only css [duplicate]


Tags: html,css,html5,css3

Problem :

This question already has an answer here:

How to create rating system using only css. I don't want to use javascript/jquery or anything else. I don't want to use image/image sprites also. I need it only in hover(mouse over) not in click and in pure css. here is the sample image I want.

enter image description here



Solution :

html code...

<div class="rate">
            <div class="rate-item">☆</div>
            <div class="rate-item">☆</div>
            <div class="rate-item">☆</div>
        </div> 

css code...

  .rate{
        color:black;
        cursor:pointer;
    }
    .rate:hover{
        color:red;
    }
    .rate-item{
        float:left;
        cursor:pointer;
        margin:0px 15px 0px 15px;
    }
    .rate-item:hover ~ .rate-item {
        color: black;
    }

You can follow this example

http://jsfiddle.net/tanvir0604/JqKjL/1/

You can use fontawsome for better performance or just change the background image property besides the color property of my code.


    CSS Howto..

    how can I use of a php variable into a .css file

    How to split a div into multiple rows and columns in css?

    How to CSS Display:table grow right

    How to set column width for DataTables

    CSS Z-Index: How to show element above parent's sibling? (and have cousin above parent)

    How to read CSS properties of elements dynamically loaded with external script on Android browser?

    How can I change the paragraph formatting in the SharePoint RichHtmlField

    How to calculate sine, cosine in Less?

    How to override a display:none property applied to parent element in specific child elements

    How to create a progress bar animation

    How to add new value to current css value [closed]

    How to center social buttons in bootstrap login page?

    How to properly fix CSS inconsistencies across desktop and mobile browsers?

    How to contain a scrollable div element completely within another?

    How to use different CSS opacity in a nested div? [duplicate]

    how to draw the # of likes bubble like what is on the right side of the facebook like button

    Show Child Div Above Elements on Parent Div Level using z-index

    How to Toggle Switch - Prices and Config? [closed]

    how would I have the image in this div with rollover not get the overlay?

    How to display row of images in a repeater control vertically instead of horizontally

    How to limit height of div when part of 2 vertical divs in fixed parent div

    How to prepend a number before an HTML H2 with CSS?

    How to indent a data table with CSS? [closed]

    How to zoom in to a specific point smoothly with CSS?

    How to Make Text Black on .mouseover

    small space keeps showing to right side of my website w

    How do I remove the side padding in the following case?

    How to convert css margin value to pixels with just plain javascript?

    How can I enable/disable(in real time) javascript plugins on a webpage?

    How do I prevent this double hover?