Kevin Powell - CommunityKP-C
Kevin Powell - Community•14mo ago•
1 reply
Tuttu

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>


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 */
}


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.
CodePenTuttu
z-index when hovered
...
z-index when hovered
Was this page helpful?