Tuttu
Tuttu
KPCKevin Powell - Community
Created by Tuttu on 12/17/2024 in #front-end
z-index and hover interactions
I have started to build an hexagonal map using the oi.hexmap.js library as shown in this CodePen. I have an issue with conflicting z-index that I'm not sure can even be solved. I have a base div with id="hexmap1" which host the map. Inside that div, I have another one with id="compass" which has a background picture.
<div id="hexmap1">
<div id="compass"></div>
</div>
<div id="hexmap1">
<div id="compass"></div>
</div>
The library creates an hex grid inside hexmap1 which goes over compass because it's executed (The javascript) after everything in the DOM has been loaded. So I bump the z-index of compass to have it above the hex grid (Because this is what I want). When you hover over an hex, it gets a new class hover which I use to make it bigger and more visible. However, if an hex is close enough to compass, when hovered it will appear behind compass which is logical. So I tried to bump the z-index of the hex using different ways: - By selecting #hexmap1 .hover path - By selecting .hex:hover
#compass {
position: absolute;
top: 30px;
left: 30px;
width: 67px;
height: 71px;
z-index: 2;
pointer-events: none;
background-image: url(https://picsum.photos/50)
}

#hexmap1 .hover path {
stroke-width: 4px;
transform: scale(1.75);
stroke: black;
position: absolute;
z-index: 3;
}

.hex {
position: absolute;
/* Default z-index for normal hexes */
z-index: 1;
}

.hex:hover {
z-index: 3; /* Move hovered hex above the compass */
}
#compass {
position: absolute;
top: 30px;
left: 30px;
width: 67px;
height: 71px;
z-index: 2;
pointer-events: none;
background-image: url(https://picsum.photos/50)
}

#hexmap1 .hover path {
stroke-width: 4px;
transform: scale(1.75);
stroke: black;
position: absolute;
z-index: 3;
}

.hex {
position: absolute;
/* Default z-index for normal hexes */
z-index: 1;
}

.hex:hover {
z-index: 3; /* Move hovered hex above the compass */
}
None of that worked and I'm wondering if that's even possible to get the behavior I'm looking as the hexes are children of the hex grid. Is there a solution to this problem or it's simply impossible the way the things are built? What I want is that normal hexes stay under the compass <div> but that they move above that same div if hovered over.
2 replies