Skip to content

Instantly share code, notes, and snippets.

@Kcko

Kcko/index.html

Created August 17, 2018 14:54
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Kcko/2f4b1de3f9baec98d62aefdacc9d57b6 to your computer and use it in GitHub Desktop.
Save Kcko/2f4b1de3f9baec98d62aefdacc9d57b6 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin Rating panel via CSS 3 & jQuery // source http://jsbin.com/denukot
Raw
index.html
<!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>
Raw
jsbin.denukot.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);
}
}
Raw
jsbin.denukot.js
$('#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');
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment