<p>Hover Bar</p>
<p>Hover Bar</p>
<div id="wrapper">
<div class="bar">
<span class="cat6">60%</span>
<span class="cat1">10%</span>
<span class="cat3">30%</span>
</div>
</div>
<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
body{
body{
background:#0866c6;
}
.bar {border:1px solid;
width: 570px;
height: 20px;
line-height: 160px;
padding: .25em;
background: rgba(255,255,255,0.35);
margin: 8em auto;
overflow: hidden;
text-align:center;
background:#eee;
color:transparent;
}
p{
font-family: 'RobotoRegular', 'Helvetica Neue', Helvetica, sans-serif;
color:#fff;
font-size:2.5em;
text-align:center;
position:absolute;
left:50%;
width:500px;
margin-left:-250px;
top:0;
}
.bar span {
display: block;
height: 100%;
float: left;
position: relative;
transition: width .2s ease;
transition: width .4s ease;
transition: width .4s ease;
transition: width .4s ease;
}
.bar span.cat6 {
width: 0;
background: #2361a1;
z-index: 4;
}
.bar span.cat1 {
width: 0;
background: #37a0f3;
z-index: 3;
transition: width .4s ease .4s;
transition: width .4s ease .4s;
transition: width .4s ease .4s;
transition: width .4s ease .4s;
}
.bar span.cat3 {
width: 0;
background: #58c779;
z-index: 2;
transition: width .4s ease .8s;
transition: width .4s ease .8s;
transition: width .4s ease .8s;
transition: width .4s ease .8s;
}
.bar.active span.cat6 {
width: 60%;
color:#eee;
}
.bar.active span.cat1 {
width: 10%;
color:#eee;
}
.bar.active span.cat3 {
width: 30%;
color:#eee;
$(document).ready(function () {
$(document).ready(function () {
// Declare Vars
var blockLast = $('#wrapper');
//Create an event, here its on "mouseover"
blockLast.on('mouseover', function (e) {
e.preventDefault();
var elm = $('#wrapper .bar');
elm.addClass('active');
});
blockLast.on('mouseleave', function (e) {
e.preventDefault();
var elm = $('#wrapper .bar');
elm.removeClass('active');
});
});