У меня есть три меню, когда я помещаю курсор в первую точку, первые пункты активируются в других меню, и так во всех пунктах меню

Question

$('a')
  .on('mouseover', function() {
    var elem = $(this).attr('id');
    $('[id=' + elem + ']').addClass('Active').siblings().removeClass('Active');
  })
  .on('mouseleave', function() {
    var elem = $(this).attr('id');
    $('[id=' + elem + ']').removeClass('Active');
  });

.Active {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li><a href="#_" id="profileRed">Menu Item 1</a></li>
  <li><a href="#_" id="profileBlue">Menu Item 2</a></li>
  <li><a href="#_" id="profilePink">Menu Item 3</a></li>
  <li><a href="#_" id="profileGreen">Menu Item 4</a></li>
</ul>
<ul>
  <li><a href="#_" id="profileRed">Menu Item 1</a></li>
  <li><a href="#_" id="profileBlue">Menu Item 2</a></li>
  <li><a href="#_" id="profilePink">Menu Item 3</a></li>
  <li><a href="#_" id="profileGreen">Menu Item 4</a></li>
</ul>
<ul>
  <li><a href="#_" id="profileRed">Menu Item 1</a></li>
  <li><a href="#_" id="profileBlue">Menu Item 2</a></li>
  <li><a href="#_" id="profilePink">Menu Item 3</a></li>
  <li><a href="#_" id="profileGreen">Menu Item 4</a></li>
</ul>

Answer 1

ul.menu>li>a:hover {
  color: red;
}

<ul class="menu">
  <li><a href="#_" id="profileRed">Menu Item 1</a></li>
  <li><a href="#_" id="profileBlue">Menu Item 2</a></li>
  <li><a href="#_" id="profilePink">Menu Item 3</a></li>
  <li><a href="#_" id="profileGreen">Menu Item 4</a></li>
</ul>
<ul class="menu">
  <li><a href="#_" id="profileRed">Menu Item 1</a></li>
  <li><a href="#_" id="profileBlue">Menu Item 2</a></li>
  <li><a href="#_" id="profilePink">Menu Item 3</a></li>
  <li><a href="#_" id="profileGreen">Menu Item 4</a></li>
</ul>
<ul class="menu">
  <li><a href="#_" id="profileRed">Menu Item 1</a></li>
  <li><a href="#_" id="profileBlue">Menu Item 2</a></li>
  <li><a href="#_" id="profilePink">Menu Item 3</a></li>
  <li><a href="#_" id="profileGreen">Menu Item 4</a></li>
</ul>

Answer 2

Ответ переписан после уточняющих комментариев.

Вы можете использовать на data-атрибуты, чтобы не пересекаться со стилями меню. Имя для data-атрибута вы выбираете сами. В моем примере это data-item-role.

В качестве альтернативного решения можно добавить каждому элементу меню специальный класс с префиксом .js-. Такие классы не используются при стилизации, а сам префикс служит для разработчиков указателем на то, что данный класс нужен для какого-то заскриптованного функционала и на него не нужно вешать какие-либо стили.

К примеру ниже вы можете добавить любые классы и атрибуты для стилизации меню. Это никак не повлияет на функционал.

$('[data-item-role] a')
  .on('mouseover', function() {
    var id = $(this).data('id');
    $('[data-item-role] [data-id="' + id + '"]').addClass('Active');
  })
  .on('mouseleave', function() {
    $('[data-item-role] a').removeClass('Active');
  });

.Active {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul data-item-role="menu">
  <li><a href="#_" data-id="profileRed">Menu Item 1</a></li>
  <li><a href="#_" data-id="profileBlue">Menu Item 2</a></li>
  <li><a href="#_" data-id="profilePink">Menu Item 3</a></li>
  <li><a href="#_" data-id="profileGreen">Menu Item 4</a></li>
</ul>
<ul data-item-role="menu">
  <li><a href="#_" data-id="profileRed">Menu Item 1</a></li>
  <li><a href="#_" data-id="profileBlue">Menu Item 2</a></li>
  <li><a href="#_" data-id="profilePink">Menu Item 3</a></li>
  <li><a href="#_" data-id="profileGreen">Menu Item 4</a></li>
</ul>
<ul data-item-role="menu">
  <li><a href="#_" data-id="profileRed">Menu Item 1</a></li>
  <li><a href="#_" data-id="profileBlue">Menu Item 2</a></li>
  <li><a href="#_" data-id="profilePink">Menu Item 3</a></li>
  <li><a href="#_" data-id="profileGreen">Menu Item 4</a></li>
</ul>

БЛОГ НА HUSL

У меня есть три меню, когда я помещаю курсор в первую точку, первые пункты активируются в других меню, и так во всех пунктах меню

Ответы (2 шт):