I need assistance with creating an audio visualizer effect where on mouseover, "this" div becomes the tallest one and the other divs adjust their heights accordingly. How can I specify the specific height for each sister div to change to?
Code
window.onload = window.onscroll = function() {
var bars = document.getElementsByClassName('bar');
[].forEach.call(bars, function(bar) {
bar.style.height = Math.random() * 50 + '%';
});
}.bars {
position: fixed;
top: 30px;
right: 0;
bottom: 40px;
left: 0;
margin: 10px auto;
text-align: center
}
.bars::before {
content: "";
display: inline-block;
height: 100%;
}
.bar {
display: inline-block;
vertical-align: bottom;
width: 4rem;
height: 25%;
margin-right: .75em;
background: #333;
-webkit-transition: height 0.5s ease-out;
transition: height 0.5s ease-out;
}<div class="container">
<div class="bars">
<div class="bar" id="barOne"></div>
<div class="bar" id="barTwo"></div>
<div class="bar" id="barThree"></div>
<div class="bar" id="barFour"></div>
<div class="bar" id="barFive"></div>
</div>
</div>Thank you for any guidance you can provide!