$(document).ready(function() {
$("text.p01").mouseover(function() {
$("span.resultado-repeticion").css("visibility", "visible");
$("span.resultado-repeticion").text("60 REPETICIONES")
});
$("text.p01").mouseout(function() {
$("span.resultado-repeticion").css("visibility", "hidden");
});
$("text.p02").mouseover(function() {
$("span.resultado-repeticion").css("visibility", "visible");
$("span.resultado-repeticion").text("65 REPETICIONES")
});
$("text.p02").mouseout(function() {
$("span.resultado-repeticion").css("visibility", "hidden");
});
$("text.p03").mouseover(function() {
$("span.resultado-repeticion").css("visibility", "visible");
$("span.resultado-repeticion").text("70 REPETICIONES")
});
$("text.p03").mouseout(function() {
$("span.resultado-repeticion").css("visibility", "hidden");
});
$("text.p04").mouseover(function() {
$("span.resultado-repeticion").css("visibility", "visible");
$("span.resultado-repeticion").text("75 REPETICIONES")
});
$("text.p04").mouseout(function() {
$("span.resultado-repeticion").css("visibility", "hidden");
});
$("text.p05").mouseover(function() {
$("span.resultado-repeticion").css("visibility", "visible");
$("span.resultado-repeticion").text("80 REPETICIONES")
});
$("text.p05").mouseout(function() {
$("span.resultado-repeticion").css("visibility", "hidden");
});
$("text.p06").mouseover(function() {
$("span.resultado-repeticion").css("visibility", "visible");
$("span.resultado-repeticion").text("85 REPETICIONES")
});
$("text.p06").mouseout(function() {
$("span.resultado-repeticion").css("visibility", "hidden");
});
$("text.p07").mouseover(function() {
$("span.resultado-repeticion").css("visibility", "visible");
$("span.resultado-repeticion").text("90 REPETICIONES")
});
$("text.p07").mouseout(function() {
$("span.resultado-repeticion").css("visibility", "hidden");
});
$("text.p08").mouseover(function() {
$("span.resultado-repeticion").css("visibility", "visible");
$("span.resultado-repeticion").text("95 REPETICIONES")
});
$("text.p08").mouseout(function() {
$("span.resultado-repeticion").css("visibility", "hidden");
});
$("text.p09").mouseover(function() {
$("span.resultado-repeticion").css("visibility", "visible");
$("span.resultado-repeticion").text("100 REPETICIONES")
});
$("text.p09").mouseout(function() {
$("span.resultado-repeticion").css("visibility", "hidden");
});
$("text.p10").mouseover(function() {
$("span.resultado-repeticion").css("visibility", "visible");
$("span.resultado-repeticion").text("110 REPETICIONES")
});
$("text.p10").mouseout(function() {
$("span.resultado-repeticion").css("visibility", "hidden");
});
});
.palabras-transform .p01:hover,
.palabras-transform .p02:hover,
.palabras-transform .p03:hover,
.palabras-transform .p04:hover,
.palabras-transform .p05:hover,
.palabras-transform .p06:hover,
.palabras-transform .p07:hover,
.palabras-transform .p08:hover,
.palabras-transform .p09:hover,
.palabras-transform .p10:hover {
fill: rgba(255, 255, 255, 1.0);
font-size: 1.2em;
text-shadow: 0px 0px 10px #ffa300;
}
.palabras-transform .p01,
.palabras-transform .p02,
.palabras-transform .p03,
.palabras-transform .p04,
.palabras-transform .p05,
.palabras-transform .p06,
.palabras-transform .p07,
.palabras-transform .p08,
.palabras-transform .p09,
.palabras-transform .p10 {
fill: rgba(255, 255, 255, 0.5);
}
.resultado-repeticion {
position: relative;
bottom: 70px;
background: #212322;
color: #fff;
width: 100%;
text-align: center;
font-size: 1.5em;
text-align: center;
}
svg {
width: 100%;
height: 450px;
font-size: 1.2em;
text-shadow: 0px 0px 10px black;
z-index: -1;
}
.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);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<g></g>
<g class="palabras-transform">
<text class="p01" text-anchor="middle" transform="translate(-190,80)rotate(0)" style="font-family: SunshineFont;">PORQUE</text>
<text class="p02" text-anchor="middle" transform="translate(-140,20)rotate(90)" style="font-family: SunshineFont;">ARKANO</text>
<text class="p03" text-anchor="middle" transform="translate(-200,40)rotate(0)" style="font-family: SunshineFont;">AHORA</text>
<text class="p04" text-anchor="middle" transform="translate(-60,50)rotate(0)" style="font-family: SunshineFont;">ESTÁ</text>
<text class="p05" text-anchor="middle" transform="translate(-80,-40)rotate(-90)" style="font-family: SunshineFont;">HACIENDO</text>
<text class="p06" text-anchor="middle" transform="translate(0,40)rotate(-90)" style="font-family: SunshineFont;">SABES</text>
<text class="p07" text-anchor="middle" transform="translate(-150,-40)rotate(-45)" style="font-family: SunshineFont;">MENTE</text>
<text class="p08" text-anchor="middle" transform="translate(-190,-70)rotate(-60)" style="font-family: SunshineFont;">TELÉFONO</text>
<text class="p09" text-anchor="middle" transform="translate(10,-40)rotate(-45)" style="font-family: SunshineFont;">PREMIO</text>
<text class="p10" text-anchor="middle" transform="translate(-60,-110)rotate(0)" style="font-family: SunshineFont;">VICTORIA</text>
</g>
</svg>
<span class="resultado-repeticion"> </span>
Text
en una especie de popover/tooltip? ¿Dónde se asocia cadaText
con sus resultados?