Kcko
8/17/2018 - 2:54 PM
JS Bin Rating panel via CSS 3 & jQuery // source http://jsbin.com/denukot
$('#wrapper div').mouseover(function(){
$(this).children('span').addClass('active');
$(this).prevAll().children('span').addClass('active')
});
$('#wrapper div').mouseout(function(){
$(this).prevAll().children('span').removeClass('active')
$(this).children('span').removeClass('active');
});#wrapper
{
display: flex;
}
#wrapper > div
{
width: 40px;
}
div span
{
border: 1px solid gray;
background: #efefef;
display: block;
border-radius: 50%;
width: 30px;
height: 30px;
text-align: center;
line-height: 30px;
transition-duration: 500ms;
}
@for $i from 1 through 10
{
div:nth-child(#{$i}) span.active
{
background: mix(green, white, $i * 10);
}
}<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Rating panel via CSS 3 & jQuery">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<style id="jsbin-css">
#wrapper
{
display: flex;
}
#wrapper > div
{
width: 40px;
}
div span
{
border: 1px solid gray;
background: #efefef;
display: block;
border-radius: 50%;
width: 30px;
height: 30px;
text-align: center;
line-height: 30px;
transition-duration: 500ms;
}
@for $i from 1 through 10
{
div:nth-child(#{$i}) span.active
{
background: mix(green, white, $i * 10);
}
}
</style>
</head>
<body>
<div id="wrapper">
<div><span>1</span></div>
<div><span>2</span></div>
<div><span>3</span></div>
<div><span>4</span></div>
<div><span>5</span></div>
<div><span>6</span></div>
<div><span>7</span></div>
<div><span>8</span></div>
<div><span>9</span></div>
<div><span>10</span></div>
</div>
<script id="jsbin-javascript">
$('#wrapper div').mouseover(function(){
$(this).children('span').addClass('active');
$(this).prevAll().children('span').addClass('active')
});
$('#wrapper div').mouseout(function(){
$(this).prevAll().children('span').removeClass('active')
$(this).children('span').removeClass('active');
});
</script>
<script id="jsbin-source-css" type="text/css">#wrapper
{
display: flex;
}
#wrapper > div
{
width: 40px;
}
div span
{
border: 1px solid gray;
background: #efefef;
display: block;
border-radius: 50%;
width: 30px;
height: 30px;
text-align: center;
line-height: 30px;
transition-duration: 500ms;
}
@for $i from 1 through 10
{
div:nth-child(#{$i}) span.active
{
background: mix(green, white, $i * 10);
}
}</script>
<script id="jsbin-source-javascript" type="text/javascript">$('#wrapper div').mouseover(function(){
$(this).children('span').addClass('active');
$(this).prevAll().children('span').addClass('active')
});
$('#wrapper div').mouseout(function(){
$(this).prevAll().children('span').removeClass('active')
$(this).children('span').removeClass('active');
});</script></body>
</html>