7 jun
2017

Acción con hover en Mapa de Palabras SVG

Tengo este mapa de palabras en svg y necesito que pasen por arriba de una de las palabras y arroje un div con un texto. Básicamente no se como hacer el trigger con mouseover para que aparezca el cuadro de txt. Gracias por la ayuda!

.palabras-transform .palabras:hover {
  fill: rgba(255, 255, 255, 1.0);
  font-size: 1.2em;
  text-shadow: 0px 0px 10px #ffa300;
}

.palabras-transform .palabras {
  fill: rgba(255, 255, 255, 0.5);
}

.palabras-transform {
  -ms-transform: translate(500px, 295px) scale(1.8, 1.8);
  /* IE 9 */
  -webkit-transform: translate(500px, 295px) scale(1.8, 1.8);
  /* Safari */
  transform: translate(500px, 295px) scale(1.8, 1.8);
}

svg {
  width: 100%;
  height: 450px;
  font-size: 1.2em;
  text-shadow: 0px 0px 10px black;
}
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
  <g></g>
  <g class="palabras-transform">
<text class="palabras" text-anchor="middle" transform="translate(-190,80)rotate(0)" style="font-family: SunshineFont;">PORQUE</text>
<text class="palabras" text-anchor="middle" transform="translate(-140,20)rotate(90)" style="font-family: SunshineFont;">ARKANO</text>
<text class="palabras" text-anchor="middle" transform="translate(-200,40)rotate(0)" style="font-family: SunshineFont;">AHORA</text>
<text class="palabras" text-anchor="middle" transform="translate(-60,50)rotate(0)" style="font-family: SunshineFont;">ESTÁ</text>
<text class="palabras" text-anchor="middle" transform="translate(-80,-40)rotate(-90)" style="font-family: SunshineFont;">HACIENDO</text>
<text class="palabras" text-anchor="middle" transform="translate(0,40)rotate(-90)" style="font-family: SunshineFont;">SABES</text>
<text class="palabras" text-anchor="middle" transform="translate(-150,-40)rotate(-45)" style="font-family: SunshineFont;">MENTE</text>
<text class="palabras" text-anchor="middle" transform="translate(-190,-70)rotate(-60)" style="font-family: SunshineFont;">TELÉFONO</text>
<text class="palabras" text-anchor="middle" transform="translate(10,-40)rotate(-45)" style="font-family: SunshineFont;">PREMIO</text>
<text class="palabras" text-anchor="middle" transform="translate(-60,-110)rotate(0)" style="font-family: SunshineFont;">VICTORIA</text>
  </g>
</svg>

COMENTARIOS

DEJA TU COMENTARIO

© 2017 website by Rubit Corporation