80
rated 0 times
[
83]
[
3]
/ answers: 1 / hits: 25124
/ 9 Years ago, mon, december 28, 2015, 12:00:00
I have a progress bar which has two children(parts). Whenever each of this children is hovered the total height of the progress and its children will change. I have managed to solve for the first children using the next sibling selector but I can't find a solution for the second children (the yellow part). Up to now I have solved this using jQuery but I want to do this in pure CSS.
fiddle: https://jsfiddle.net/zfh263r6/5/
$('#start').on({
mouseenter: function () {
//$(this).css('height', '4px');
//$( 'progress' ).css('height', '4px');
},
mouseleave: function () {
//$(this).css('height', '');
// $( 'progress' ).css('height', '');
}
});#progress_wrap {
position: relative;
height: 4px; /*max height of progress*/
background: #f3f3f3;
}
progress {
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
width: 100%;
border:none;
height: 2px;
transition:all .25s ease-in;
cursor: pointer;
background-color: #fff;
position: absolute;
top: 0;
left: 0;
display: block;
}
progress:hover, progress:hover + #start {height: 4px}
progress[value] {
/* Reset the default appearance */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
/* Get rid of default border in Firefox. */
border: none;
/* For IE10 */
color: #f8008c;
}
progress[value]::-webkit-progress-bar {
background-color: #fff;
border:none;
}
progress[value]::-webkit-progress-value {background:#f8008c}
progress::-ms-progress-value {background:#f8008c}
progress::-moz-progress-bar {background:#f8008c}
progress::-ms-fill {border: none}
#start {
height: 2px;
transition: all .25s ease-in;
cursor: pointer;
background-color: #ffe232;
position: absolute;
top: 0;
left: 0px;
width: 30px;
}<script src=https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js></script>
<div id=progress_wrap>
<progress min=0 max=1 value=0.66 id=progress></progress>
<div id=start style=display: inline-block; left: 50px;></div>
</div>
More From » jquery
