JavaScript样式。鼠标悬停时姐姐div的高度

Question

I'm trying to simulate the look of an audio visualizer so that on mouseover, "this" div becomes the tallest div, while the sister divs shift heights as well. How do I specify which height the sister divs should 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> 

Thanks for your help!

Answer 1

Here's a fiddle that should get you pointed in the right direction: https://jsfiddle.net/8p2yvro9/7/

let container = document.getElementsByClassName('container')[0];
let bars = document.getElementsByClassName('bar');

[].forEach.call(bars, bar => {
  bar.addEventListener('mouseover', function() {
    shiftBars(bar);
  });
});

function shiftBars(barOver) {
  [].forEach.call(bars, function(bar) {
    bar.style.height = Math.random() * 50 + '%';
  });
  barOver.style.height = '100%';
}