Tengo un mapa con diferentes marcadores y, por lo que sé, los marcadores se representan en el orden en que aparecen, lo que significa que el marcador 3 está encima del marcador 1 y 2. Estoy usando React Map Gl con mapblibre-gl y React (mecanografiado ) Estoy de acuerdo con eso, pero si paso el cursor sobre un marcador, quiero que el marcador sobre el que se pasa esté en la parte superior (cuando se superpone con otro marcador). Probé z-index pero no funciona en absoluto.
Fabricante:
<Marker latitude={station.lat} longitude={station.lng} key={station.id} > <div className='locDot'> <div className='priceTag'> <span id="brand">{station.brand ? station.brand : 'freie Tankstelle'}</span> <span id="price">{price}</span> </div> </div> </Marker >Este marcador se inserta en una matriz y se devuelve como componente de muchos marcadores.
CSS:
.locDot{ /* position: absolute; */ height: 12px; width: 12px; display: flex; justify-content: center; align-items: flex-end; background-color: #1E90FF; border: 2px solid #fff; border-radius: 100%; /* z-index: 1; */ } .priceTag{ /* position: relative; */ display: flex; flex-direction: column; background-color: #1E90FF; padding: 4px 6px; font-size: 1rem; font-weight: 400; color: white; margin-bottom: 18px; border-radius: 5px; /* line-height: 1rem; */ z-index: 1; } .priceTag:hover{ position: absolute; border: 5px solid red; z-index: 5; }Sandox: codesandbox.io/s/vigorous-mahavira-gxk6wj?file=/src/App.tsx
Debe aplicar zIndex al marcador en sí, puede hacerlo agregando className o estilo en línea.
He actualizado los códigos y el cuadro con la solución, básicamente mapearemos una matriz simple y devolveremos los marcadores, según el índice del marcador, estableceremos el estado activo y luego verificaremos cuál es el índice activo actual en el estilo en línea del marcador. Si pasa el cursor sobre ese div, establezca un índice activo en su índice.
Pero como dije, esto podría lograrse simplemente mediante className active pasivo y luego dándole z-index: 1
Aquí está la caja de códigos