Селекторы CSS:

• Используйте селектор +, чтобы выбрать соседний
  :

  .hovered-div:hover + .adjacent-div {
  /* CSS properties to change the color */
  }

• Используйте селектор ~, чтобы выбрать все следующие соседние элементы
  :

  .hovered-div:hover ~ .adjacent-div {
  /* CSS properties to change the color */
  }

JavaScript/jQuery:

• Используя JavaScript или jQuery, вы можете добавить прослушиватели событий для достижения желаемого эффекта. Вот пример использования JavaScript:

  const hoveredDiv = document.querySelector('.hovered-div');
  const adjacentDiv = document.querySelector('.adjacent-div');
  hoveredDiv.addEventListener('mouseover', () => {
  adjacentDiv.style.backgroundColor = 'your-color';
  });
  hoveredDiv.addEventListener('mouseout', () => {
  adjacentDiv.style.backgroundColor = 'initial';
  });

CSS Flexbox:

• Если элементы
  являются однородными внутри гибкого контейнера, вы можете использовать свойство order, чтобы изменить их визуальный порядок. Затем при наведении курсора вы можете настроить цвет фона соседнего элемента

  . Вот пример:

  .container {
  display: flex;
  }
  .hovered-div:hover {
  order: 1;
  }
  .adjacent-div {
  order: 2;
  /* CSS properties to change the color */
  }