1 reply

z-index and hover interactions

I have started to build an hexagonal map using the

oi.hexmap.js

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"

id="hexmap1"

which host the map. Inside that div, I have another one with

id="compass"

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

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

hover

which I use to make it bigger and more visible. However, if an hex is close enough to

compass

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

#hexmap1 .hover path

- By selecting

.hex:hover

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

CodePenTuttu

z-index when hovered

...

z-index and hover interactions

I have started to build an hexagonal map using the

oi.hexmap.js

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"

id="hexmap1"

which host the map. Inside that div, I have another one with

id="compass"

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

hexmap1

hover

hover

which I use to make it bigger and more visible. However, if an hex is close enough to

compass

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

#hexmap1 .hover path

- By selecting

.hex:hover

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

CodePenTuttu

z-index when hovered

...

z-index and hover interactions

z-index and hover interactions

Similar Threads

Similar Threads

Similar Threads