I have an interactive SVG Map with numerous layers (Places) and text overlaid on top.
I am trying to implement a hover effect for the places, however, when the cursor hovers over the text (which is positioned above the places), the hover effect disappears.
Is there a way to deactivate the text element (which has been converted to curves) so that it does not interfere with the hover effect?
.circle{
position:absolute;
top:100px;
left:50px;
width:100px;
height:100px;
background-color:red;
border-radius:50px;
text-align:center;
}
.background{
width:200px;
height:200px;
background-color:gray;
display:flex;
justify-content:center;
align-items:center;
}
.background:hover{
background-color:white;
}<div class="background">
</div>
<div class="circle">001</div>In this scenario, the background-element represents my Map, and the 001 element signifies my curved text.