Kevin Powell - Community•23h ago

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.

Tuttu

CodePen

z-index when hovered

...

1 Reply

TuttuOP•23h ago

It's important to note that the final HMTL layout produced by the Javascript looks like that:

<div id="hexmap1" class="oi-viz oi-map oi-map-hex">
    <div id="compass"></div>
    <div class="oi-top">
        <div class="oi-left"></div>
        <div class="oi-right"></div>
    </div>
    <div class="oi-map-holder">
        <div class="oi-map-inner" style="position: relative;"><svg class="oi-map-map">
                <rect id="grid"></rect>
                <defs>                 
                </defs>
                <g class="data-layer" role="table">
                    <g class="series" role="row" aria-label="hexagons" tabindex="0">
                        <g class="hex swirl"></g>
                        <g class="hex swirl"></g>
                        <g class="hex swirl"></g>
                    </g>
                </g>
                <g class="overlay"></g>
            </svg></div>
    </div>
    <div class="oi-bottom">
        <div class="oi-left"></div>
        <div class="oi-right"></div>
    </div>
</div>

<div id="hexmap1" class="oi-viz oi-map oi-map-hex">
    <div id="compass"></div>
    <div class="oi-top">
        <div class="oi-left"></div>
        <div class="oi-right"></div>
    </div>
    <div class="oi-map-holder">
        <div class="oi-map-inner" style="position: relative;"><svg class="oi-map-map">
                <rect id="grid"></rect>
                <defs>                 
                </defs>
                <g class="data-layer" role="table">
                    <g class="series" role="row" aria-label="hexagons" tabindex="0">
                        <g class="hex swirl"></g>
                        <g class="hex swirl"></g>
                        <g class="hex swirl"></g>
                    </g>
                </g>
                <g class="overlay"></g>
            </svg></div>
    </div>
    <div class="oi-bottom">
        <div class="oi-left"></div>
        <div class="oi-right"></div>
    </div>
</div>

The #compass div is sharing a common parent (#hexmap1) with the hexes but the hexes are nested inside more divs. That might explain why I can't use z-index like I want because they are not part of the same "stack". But maybe there are some magic tricks I'm not aware of that could solve this issue. 🙂

Gaming

Programming

z-index and hover interactions