I am facing an issue with hover options...
What I am looking for is a text in a circle
Finally, I achieved the desired look using csswrap
Next, I added some jQuery to insert links into all spans with the same class
Everything is working fine, except for the hover effect.
I attempted to use:
span:hover a {color: red;}
However, it did not change the color of all "a" elements as expected. When hovering over one, it should change the color of all spans with the same class.
Is there a way to group all spans into one unique element without losing the circular effect?
$(".research").html(function(i, html){
return "<a href='#' class='prvi'>"+ html +"</a>";
});
$(".schematic").html(function(i, html){
return "<a href='#'>"+ html +"</a>";
});
$(".development").html(function(i, html){
return "<a href='#'>"+ html +"</a>";
});
$(".activation").html(function(i, html){
return "<a href='#'>"+ html +"</a>";
});
$(".celebration").html(function(i, html){
return "<a href='#'>"+ html +"</a>";
});#warped {position: relative; display: table; width:855px; height:618.0000019073486px;}
#warped>span[class^=w]:nth-of-type(n+0){display:block; position:absolute;
-moz-transform-origin:50% 100%; -webkit-transform-origin:50% 100%; -o-transform-origin:50%
100%; -ms-transform-origin:50% 100%; transform-origin:50% 100%; }
#warped span{font-family:'ABeeZee';font-size:20px;font-weight:regular;font-style:normal;
line-height:1; white-space:pre; overflow:visible; padding:0px;}
#warped .w0 {-moz-transform: rotate(-0.4rad);-webkit-transform: rotate(-0.4rad);-o-transform:
rotate(-0.4rad);-ms-transform: rotate(-0.4rad); transform: rotate(-0.4rad);
width: 12px; height: 20px; left: 234.42px; top: 70.65px;}
#warped .w1 {-moz-transform: rotate(-0.32rad);-webkit-transform: rotate(-0.32rad);-o-transform:
rotate(-0.32rad);-ms-transform: rotate(-0.32rad); transform: rotate(-0.32rad);
width: 6px; height: 20px; left: 247.26px; top: 67px;}
...
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="warped"> <div></div>
<span class='w0 research'>1</span><span class='w1 research'>.</span><span class='w2 research'>R</span><span class='w3 research'>e</span><span class='w4 research'>s</span><span class='w5 research'>e</span><span class='w6 research'>a</span><span class='w7 research'>r</span><span class='w8 research'>c</span><span class='w9 research'>h</span><span class='w10 research'> </span><span class='w11 research'>></span><span class='w12'> </span><span class='w13'> </span><span class='w14'>
</span><span class='w15 schematic'>2</span><span class='w16 schematic'>.</span><span class='w17 schematic'>S</span><span class='w18 schematic'>c</span><span class='w19 schematic'>h</span><span class='w20 schematic'>e</span><span class='w21 schematic'>m</span><span class='w22 schematic'>a</span><span class='w23 schematic'>t</span><span class='w24 schematic'>i</span><span class='w25 schematic'>c</span><span class='w26 schematic'> </span><span class='w27 schematic'>></span><span class='w28'> </span><span class='w29'> </span><span class='w30'>
</div>Note: This is not a complete snippet, as the full circle effect has already been achieved.