将悬停时的CSS类应用于其他元素

<style>
.hover-class {
  /* 在这里定义悬停时的样式 */
  background-color: yellow;
}
</style>

<div class="hover-class">悬停的元素</div>

<div class="class-to-hover">需要应用悬停样式的元素1</div>
<div class="class-to-hover">需要应用悬停样式的元素2</div>
<div class="class-to-hover">需要应用悬停样式的元素3</div>

// 获取需要应用悬停样式的元素
const elementsToHover = document.querySelectorAll('.class-to-hover');

// 获取悬停元素
const hoverElement = document.querySelector('.hover-class');

// 监听悬停事件
hoverElement.addEventListener('mouseover', () => {
  elementsToHover.forEach(element => {
    element.classList.add('hover-class'); // 添加悬停样式类
  });
});

hoverElement.addEventListener('mouseout', () => {
  elementsToHover.forEach(element => {
    element.classList.remove('hover-class'); // 移除悬停样式类
  });
});