Wrapped span, hover effect-CodePudding

I have problem with hover option..

Now, I got same look using csswrap

After, I put some jQuery to add links all spans with same class

All of that is fine, except hover effect.

I tried with

span:hover a {color: red;}

And it's not changing color of all "a" elementes.. I mean, it changing, but because of this wrap, it not looks well. If I hover one, it should change color to all spans with same class

Is there a way to group all spans into one, without losing circle 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;}

                     #warped .w2 {-moz-transform: rotate(-0.25rad);-webkit-transform: rotate(-0.25rad);-o-transform:
                     rotate(-0.25rad);-ms-transform: rotate(-0.25rad); transform: rotate(-0.25rad);
                     width: 12px; height: 20px; left: 254.35px; top: 64.1px;}

                     #warped .w3 {-moz-transform: rotate(-0.15rad);-webkit-transform: rotate(-0.15rad);-o-transform:
                     rotate(-0.15rad);-ms-transform: rotate(-0.15rad); transform: rotate(-0.15rad);
                     width: 11px; height: 20px; left: 267.59px; top: 61.56px;}

                     #warped .w4 {-moz-transform: rotate(-0.07rad);-webkit-transform: rotate(-0.07rad);-o-transform:
                     rotate(-0.07rad);-ms-transform: rotate(-0.07rad); transform: rotate(-0.07rad);
                     width: 10px; height: 20px; left: 280.02px; top: 60.28px;}

                     #warped .w5 {-moz-transform: rotate(0.02rad);-webkit-transform: rotate(0.02rad);-o-transform:
                     rotate(0.02rad);-ms-transform: rotate(0.02rad); transform: rotate(0.02rad);
                     width: 11px; height: 20px; left: 291.52px; top: 60.03px;}

                     #warped .w6 {-moz-transform: rotate(0.11rad);-webkit-transform: rotate(0.11rad);-o-transform:
                     rotate(0.11rad);-ms-transform: rotate(0.11rad); transform: rotate(0.11rad);
                     width: 12px; height: 20px; left: 303.98px; top: 60.91px;}

                     #warped .w7 {-moz-transform: rotate(0.19rad);-webkit-transform: rotate(0.19rad);-o-transform:
                     rotate(0.19rad);-ms-transform: rotate(0.19rad); transform: rotate(0.19rad);
                     width: 8px; height: 20px; left: 317.34px; top: 62.69px;}

                     #warped .w8 {-moz-transform: rotate(0.27rad);-webkit-transform: rotate(0.27rad);-o-transform:
                     rotate(0.27rad);-ms-transform: rotate(0.27rad); transform: rotate(0.27rad);
                     width: 10px; height: 20px; left: 326.55px; top: 65.13px;}

                     #warped .w9 {-moz-transform: rotate(0.36rad);-webkit-transform: rotate(0.36rad);-o-transform:
                     rotate(0.36rad);-ms-transform: rotate(0.36rad); transform: rotate(0.36rad);
                     width: 12px; height: 20px; left: 337.43px; top: 69.01px;}

                     #warped .w10 {-moz-transform: rotate(0.43rad);-webkit-transform: rotate(0.43rad);-o-transform:
                     rotate(0.43rad);-ms-transform: rotate(0.43rad); transform: rotate(0.43rad);
                     width: 6px; height: 20px; left: 350.1px; top: 73.08px;}

                     #warped .w11 {-moz-transform: rotate(0.51rad);-webkit-transform: rotate(0.51rad);-o-transform:
                     rotate(0.51rad);-ms-transform: rotate(0.51rad); transform: rotate(0.51rad);
                     width: 12px; height: 20px; left: 356.45px; top: 77.87px;}

                     #warped .w12 {-moz-transform: rotate(0.58rad);-webkit-transform: rotate(0.58rad);-o-transform:
                     rotate(0.58rad);-ms-transform: rotate(0.58rad); transform: rotate(0.58rad);
                     width: 6px; height: 20px; left: 368.4px; top: 83.34px;}

                     #warped .w13 {-moz-transform: rotate(0.63rad);-webkit-transform: rotate(0.63rad);-o-transform:
                     rotate(0.63rad);-ms-transform: rotate(0.63rad); transform: rotate(0.63rad);
                     width: 6px; height: 20px; left: 374.54px; top: 87.65px;}

                     #warped .w14 {-moz-transform: rotate(0.67rad);-webkit-transform: rotate(0.67rad);-o-transform:
                     rotate(0.67rad);-ms-transform: rotate(0.67rad); transform: rotate(0.67rad);
                     width: 0px; height: 20px; left: 381.11px; top: 90.4px;}

                     #warped .w15 {-moz-transform: rotate(0.72rad);-webkit-transform: rotate(0.72rad);-o-transform:
                     rotate(0.72rad);-ms-transform: rotate(0.72rad); transform: rotate(0.72rad);
                     width: 12px; height: 20px; left: 380.85px; top: 95.22px;}

                     #warped .w16 {-moz-transform: rotate(0.8rad);-webkit-transform: rotate(0.8rad);-o-transform:
                     rotate(0.8rad);-ms-transform: rotate(0.8rad); transform: rotate(0.8rad);
                     width: 6px; height: 20px; left: 391.44px; top: 102.47px;}

                     #warped .w17 {-moz-transform: rotate(0.87rad);-webkit-transform: rotate(0.87rad);-o-transform:
                     rotate(0.87rad);-ms-transform: rotate(0.87rad); transform: rotate(0.87rad);
                     width: 11px; height: 20px; left: 395.64px; top: 109.89px;}

                     #warped .w18 {-moz-transform: rotate(0.95rad);-webkit-transform: rotate(0.95rad);-o-transform:
                     rotate(0.95rad);-ms-transform: rotate(0.95rad); transform: rotate(0.95rad);
                     width: 10px; height: 20px; left: 403.46px; top: 119.39px;}

                     #warped .w19 {-moz-transform: rotate(1.04rad);-webkit-transform: rotate(1.04rad);-o-transform:
                     rotate(1.04rad);-ms-transform: rotate(1.04rad); transform: rotate(1.04rad);
                     width: 12px; height: 20px; left: 409.2px; top: 129.92px;}

                     #warped .w20 {-moz-transform: rotate(1.13rad);-webkit-transform: rotate(1.13rad);-o-transform:
                     rotate(1.13rad);-ms-transform: rotate(1.13rad); transform: rotate(1.13rad);
                     width: 11px; height: 20px; left: 415.67px; top: 141.46px;}

                     #warped .w21 {-moz-transform: rotate(1.25rad);-webkit-transform: rotate(1.25rad);-o-transform:
                     rotate(1.25rad);-ms-transform: rotate(1.25rad); transform: rotate(1.25rad);
                     width: 18px; height: 20px; left: 418.02px; top: 156.35px;}

                     #warped .w22 {-moz-transform: rotate(1.37rad);-webkit-transform: rotate(1.37rad);-o-transform:
                     rotate(1.37rad);-ms-transform: rotate(1.37rad); transform: rotate(1.37rad);
                     width: 12px; height: 20px; left: 425.23px; top: 172.29px;}

                     #warped .w23 {-moz-transform: rotate(1.45rad);-webkit-transform: rotate(1.45rad);-o-transform:
                     rotate(1.45rad);-ms-transform: rotate(1.45rad); transform: rotate(1.45rad);
                     width: 8px; height: 20px; left: 429.04px; top: 183.64px;}

                     #warped .w24 {-moz-transform: rotate(1.51rad);-webkit-transform: rotate(1.51rad);-o-transform:
                     rotate(1.51rad);-ms-transform: rotate(1.51rad); transform: rotate(1.51rad);
                     width: 5px; height: 20px; left: 431.24px; top: 191.61px;}

                     #warped .w25 {-moz-transform: rotate(1.57rad);-webkit-transform: rotate(1.57rad);-o-transform:
                     rotate(1.57rad);-ms-transform: rotate(1.57rad); transform: rotate(1.57rad);
                     width: 10px; height: 20px; left: 428.99px; top: 200.6px;}

                     #warped .w26 {-moz-transform: rotate(1.64rad);-webkit-transform: rotate(1.64rad);-o-transform:
                     rotate(1.64rad);-ms-transform: rotate(1.64rad); transform: rotate(1.64rad);
                     width: 6px; height: 20px; left: 430.63px; top: 210.1px;}

                     #warped .w27 {-moz-transform: rotate(1.71rad);-webkit-transform: rotate(1.71rad);-o-transform:
                     rotate(1.71rad);-ms-transform: rotate(1.71rad); transform: rotate(1.71rad);
                     width: 12px; height: 20px; left: 426.48px; top: 220.53px;}

                     #warped .w28 {-moz-transform: rotate(1.79rad);-webkit-transform: rotate(1.79rad);-o-transform:
                     rotate(1.79rad);-ms-transform: rotate(1.79rad); transform: rotate(1.79rad);
                     width: 6px; height: 20px; left: 427.55px; top: 230.85px;}

                     #warped .w29 {-moz-transform: rotate(1.84rad);-webkit-transform: rotate(1.84rad);-o-transform:
                     rotate(1.84rad);-ms-transform: rotate(1.84rad); transform: rotate(1.84rad);
                     width: 6px; height: 20px; left: 425.7px; top: 238.12px;}

                     #warped .w30 {-moz-transform: rotate(1.87rad);-webkit-transform: rotate(1.87rad);-o-transform:
                     rotate(1.87rad);-ms-transform: rotate(1.87rad); transform: rotate(1.87rad);
                     width: 0px; height: 20px; left: 427.41px; top: 242.43px;}

                     #warped .w31 {-moz-transform: rotate(1.93rad);-webkit-transform: rotate(1.93rad);-o-transform:
                     rotate(1.93rad);-ms-transform: rotate(1.93rad); transform: rotate(1.93rad);
                     width: 12px; height: 20px; left: 418.95px; top: 249.51px;}


                     .w0, .w15, .w31 .w49, .w66, .research:hover, .schematic:hover, .development:hover, .activation:hover, .celebration:hover  {
                        color: #c2932c;
                     }

                     span:hover .research {
                        color: #c2932c;
                     }

                     a {
                         text-decoration: none;
                    }

                    a, a:visited, a:hover, a:active {
  color: inherit;
}

<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 Not full snippet, already have full circle

CodePudding user response：

You can have nested <span> elements. Something like this:

<span class='link'>
  <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>

Then, you just need to change your CSS selectors a bit to get all span elements except the ones with the .link class.

You can utilize the :not() pseudo-class for that.

#warped span[class^=w]:not(.link):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:not(.link) {
  font-family: 'ABeeZee';
  font-size: 20px;
  font-weight: regular;
  font-style: normal;
  line-height: 1;
  white-space: pre;
  overflow: visible;
  padding: 0px;
}

Now, you can target the .link:hover selector to change the color.

.link:hover {
  color: #c2932c;
}

Here's a jsfiddle showing it in action.