有没有一种方法可以悬停一个元素，并用纯css/js设置许多其他元素的样式？

<div id="hover-element">悬停元素</div>

#hover-element:hover {
  color: red;
  background-color: yellow;
}

var hoverElement = document.getElementById('hover-element');
var otherElements = document.getElementsByClassName('other-element');

hoverElement.addEventListener('mouseover', function() {
  for (var i = 0; i < otherElements.length; i++) {
    otherElements[i].style.color = 'blue';
    otherElements[i].style.fontWeight = 'bold';
  }
});

hoverElement.addEventListener('mouseout', function() {
  for (var i = 0; i < otherElements.length; i++) {
    otherElements[i].style.color = '';
    otherElements[i].style.fontWeight = '';
  }
});