Réalisé une animation de survol en jquey

Bonjour ;
Je suis débutant en jquery vraiment un novice .
Je voudrais réaliser un effet de survole sur un élément et qui sélection un autre élément.

Ex :

J'ai mon menu ( menu1 menu2 menus3) et un cercle (cercle1 cercle2 cercle3) et je voudrais que quand la souris passe sur le "menu1" sélection aussi le "cercle1" et lorsque la souris passe sur le "cercle1" sélection aussi "menu1".

comme sur ce site : https://codepen.io/team/movement/pen/rrzjJb
pour la parti js j'ai trouvé ce bout de code mais il sélection un élément et non deux

     <img src="images/robo.jpg" alt="Groupe Gruau" style="position: absolute;z-index: 1;">
                        <span class="icon_img cat-3">1</span>
                        <span class="icon_img cat-0">2</span>
                    </div>
                    <div class="col span_6_of_12 ">
                        <p class="text18 margin_left_20px"><span class="blue_mi">M-iClean H :</span> <br>LES ATOUTS</p>
                        <ul class="espace_mi margin_left_20px">
                            <li> <span class="icon">1</span> - Concept d’utilisation intuitif basé sur la couleur bleue</li>
                            <li> <span class="icon">2</span> - Écran tactile flexible en verre feuilleté</li>
                            <li><span class="icon">3</span> - Élément design avec éclairage LED</li>
                            <li> <span class="icon">4</span> - Rétention des buées</li>
                            <li> <span class="icon">5</span> - Condenseur de buées à récupération d’énergie</li>
                            <li> <span class="icon">6</span> - Bras de lavage et de rinçage combinés en acier inoxydable</li>
                            <li> <span class="icon">7</span> - Ouverture automatique du capot</li>
                            <li> <span class="icon">8</span> - Détection automatique des casiers</li>
                            <li> <span class="icon">9</span> - Grande hauteur de passage (5051) / 5602) mm)</li>
                            <li> <span class="icon">10</span> - Support de casier rabattable et démontable</li>
                            <li> <span class="icon">11</span> - Table de séchage active</li>
                            <li> <span class="icon">12</span> - Conduite de dosage en acier inoxydable</li>
                            <li> <span class="icon">13</span> - Ajustement de la hauteur et montage sur socle faciles</li>
                            <li> <span class="icon">14</span> - Récupération d’énergie des eaux usées</li>
                        </ul>
                    </div>

.espace_mi {
            line-height: 33px;
        }

        .espace_mi li:hover span {
            color: #00adee;
        }

        .icon,
        .icon_img {
            color: #333333;
            display: inline-block;
            border: 1px solid #333333;
            min-width: 20px;
            min-height: 20px;
            line-height: 20px;
            vertical-align: middle;
            text-align: center;
            border-radius: 20px;

        }

        .icon,
        .icon_img:hover {
            border: 1px solid #00adee;
        }

        .icon_img {
            z-index: 2;
            color: #ffffff;
            position: relative;
            margin-left: 254px;
            margin-top: 71px;
            background: #00adee;
            border: none;

        }

        .icon_img:hover {
            background: black;

  $(document).ready(function() {
            $('.espace_mi').children().hover(function() {
                $(this).siblings().stop().fadeTo(200, 0.5);
            }, function() {
                $(this).siblings().stop().fadeTo(500, 1);
            });
        });

L'effet que je veut mais j'arrive pas a l’adapter a mon code

$(document).ready(function() {
    $('li[class^="type-"]').mouseover(function(){
      var currentClass = $(this).attr('class').split(' ')[0];
      if(currentClass != 'empty'){
      	$('.main > li').addClass('deactivate');
      	$('.' + currentClass).removeClass('deactivate');
      }
    });
   
   $('li[class^="cat-"]').mouseover(function(){
      var currentClass = $(this).attr('class').split(' ')[0];
      	$('.main > li').addClass('deactivate');
      	$('.' + currentClass).removeClass('deactivate');
    }); 
    
    $('.main > li').mouseout(function(){
      var currentClass = $(this).attr('class').split(' ')[0];
       $('.main > li').removeClass('deactivate');
    }); 
 
});

Modifié par Chris94 (20 Jul 2018 - 15:19)