Tuttu Comments - Answer Overflow

Tuttu

•Created by Tuttu on 12/17/2024 in #front-end

z-index and hover interactions

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. 🙂

2 replies

Gaming

Programming