How to create rating system using only css
interstellarDust
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.
BlackJack
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.
Collected from the Internet
Please contact [email protected] to delete if infringement.
edited at
- Prev: How to get OperationContext from an attribute implementing IServiceBehavior/IOperationBehavior
- Next: How to set position correctly in SoundJS for Firefox, IE
Related
Related Related
- 1
Simple Rating System using CSS/jQuery
- 2
CSS for star rating system
- 3
Rating system and CSS sprites
- 4
Rating system using CSS (hover from left to right)
- 5
How to create masonry layout using css only?
- 6
CSS for 5 Star Rating System
- 7
How to create Rating Dots
- 8
Star rating system : Works on only one instance
- 9
How can I create an arrow using only CSS?
- 10
How do you create a div with a triangle shape using css only?
- 11
How to create the UP Arrow using only HTML and CSS?
- 12
Create database schema for questionaire rating system
- 13
How to create rating bars in Android?
- 14
How to allow each user rate once time only in Firebase rating system
- 15
Create diamond using css3 only
- 16
Create single Dropdown with this div using css only
- 17
How to create this image using CSS?
- 18
How to create this layout using CSS
- 19
How to create a speech bubble with css only
- 20
how to create table grid view fix header with long title name using only CSS?
- 21
Using CSS, how to create a two-column grid with equal-width columns that are "only as narrow as required"?
- 22
How can I create a fade in/fade out effect using only CSS?
- 23
How do i create a responsive page with fixed positioned header and side nav using only html css?
- 24
How to clone element using Bootstrap star rating
- 25
LibreOffice how to add a rating using dots
- 26
How to clone element using Bootstrap star rating
- 27
How to get Average Rating using SQL
- 28
How to scrape the Glassdoor Rating using Selenium and Python
- 29
How can I create a clickable event that changes position attributes in the CSS file of an outer div using only html and CSS?
Comments