javascript - Hover multiple elements at once, backwards compatible -

i want set scrambled looking navigation menu. words split up, when hover on 1 word, corresponding words change different color, revealing method madness. able accomplish in 1 direction html/css, css "cascading" cannot work in reverse. here example of looking for:

example links -

red square
blue circle
green triangle

i want menu scrambled, -

red blue square green circle triangle

hovering on "red" or "square" changes both of links different color hovering on "blue" or "circle" changes them, etc...

so menu html -

<ul>  <li><a href="/link1" class="one">red</a></li>  <li><a href="/link2" class="two">blue</a></li>  <li><a href="/link1" class="one">square</a></li>  <li><a href="/link3" class="three">green</a></li>  <li><a href="/link2" class="two">circle</a></li>  <li><a href="/link3" class="three">triangle</a></li>  </ul>

i think can accomplished pretty jquery, need little help.

thanks.

with jquery.

https://jsfiddle.net/cofr7498/

$(".one").mouseover(function(){    $(".one").css("color", "red");  });  $(".one").mouseout(function(){    $(".one").css("color", "blue");  });  $(".two").mouseover(function(){    $(".two").css("color", "red");  });  $(".two").mouseout(function(){    $(".two").css("color", "blue");  });  $(".three").mouseover(function(){    $(".three").css("color", "red");  });  $(".three").mouseout(function(){    $(".three").css("color", "blue");  });

li {    display: inline;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <ul>    <li><a href="/link1" class="one">red</a></li>    <li><a href="/link2" class="two">blue</a></li>    <li><a href="/link1" class="one">square</a></li>    <li><a href="/link3" class="three">green</a></li>    <li><a href="/link2" class="two">circle</a></li>    <li><a href="/link3" class="three">triangle</a></li>  </ul>