As I attempt to adjust the zIndex of the Div Boxes so that the targeted Div Box follows the mouse cursor and all surrounding Div Boxes move behind it, an issue arises where the zIndex remains unchanged resulting in the next Div Box overlapping the previous one.
The current approach involves changing the zIndex to 1 on mouseover and -1 on mouseout.
Your assistance with this matter would be greatly appreciated. Thank you for your help in advance.
function chartOuterDivScaleMax(i) {
var a = document.getElementsByClassName('chartouterdiv');
var b = document.getElementsByClassName('logocontainer');
var c = document.getElementsByClassName('highdiv');
var d = document.getElementsByClassName('lowdiv');
a[i].style.transform = "scale(1.25)";
a[i].style.zIndex = 1;
b[i].style.transform = "scale(1.25)";
b[i].style.transform = "translate(0px, 10px)";
b[i].style.zIndex = 1;
c[i].style.height = "70px";
c[i].style.zIndex = 1;
d[i].style.height = "35px";
d[i].style.zIndex = 1;
}
function chartOuterDivScaleMin(i) {
var a = document.getElementsByClassName('chartouterdiv');
var b = document.getElementsByClassName('logocontainer');
var c = document.getElementsByClassName('highdiv');
var d = document.getElementsByClassName('lowdiv');
a[i].style.transform = "scale(1)";
a[i].style.zIndex = -1;
b[i].style.transform = "scale(1)";
b[i].style.zIndex = -1;
c[i].style.height = "55px";
c[i].style.zIndex = -1;
d[i].style.height = "50px";
d[i].style.zIndex = -1;
}
function iterateScaleFunction() {
var elements = document.getElementsByClassName("chartouterdiv");
for (let i = 0; i <= elements.length; i++ ){
elements[i].addEventListener("mouseover", function() {chartOuterDivScaleMax(i)}, false);
elements[i].addEventListener("mouseout", function() {chartOuterDivScaleMin(i)}, false);
}
}.chartouterdiv{
height:115px;
width:215px;
background-color: black;
display: flex;
align-items: center;
justify-content: center;
transition: 0.5s;
transform: scale(1);
margin-top: 10px;
margin-bottom: 10px;
float: left;
z-index: 0;
}
.chartinnerdiv{
height: 105px;
width: 205px;
background-color: white;
transform: scale(1);
z-index: 0;
}
.highdiv{
height: 55px;
width: 205px;
background-color: antiquewhite;
transition: 0.5s;
transform: scale(1);
z-index: 0;
}
.lowdiv{
height: 50px;
width: 205p;
background-color: darkgrey;
display: flex;
align-items:center;
justify-content: center;
transition: 0.5s;
transform: scale(1);
z-index: 0;
}
.logocontainer{
height: 50px;
width: 50px;
background-color: aquamarine;
transition: 0.5s;
transform: scale(1);
z-index: 0;
}<?php
$i = 1;
while($i <= 30) {
echo'<div class="chartouterdiv">';
echo'<div class="chartinnerdiv">';
echo'<div class="highdiv">';
echo'</div>';
echo'<div class="lowdiv">';
echo'<div class="logocontainer">';
echo'</div>';
echo'</div>';
echo'</div>';
echo'</div>';
$i++;
};