1

I have a SVG Map with lots of layers (Places) and also text on it. I wannt to add hover effect to the places, but whenever the curser goes on the text (which is above the places), the hover effect disapears. is there a way to deactivate the text element(which has been changed to curves) just like it dosn't exest? so the hover effect doesn't disapear?

.circle{
  position:absolute;
  top:100px;
  left:50px;
  width:100px;
  heigth: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 example, the background-element is my Map and 001 element is my curved text.

HamiD
  • 1,075
  • 1
  • 6
  • 22

1 Answers1

1

Your circle needs to be inside your background.

<div class="background">
  <div class="circle">001</div>
</div>
David Klinge
  • 362
  • 1
  • 9
  • 1
    Klinkgs: Its a big file with lots of elements, its not possible to change the element's order :/ – HamiD Jul 12 '21 at 13:52