如何将鼠标悬停在一个项目上并突出显示另外三个项目？(初学者)

<div id="container">
  <div class="project">项目1</div>
  <div class="project">项目2</div>
  <div class="project">项目3</div>
  <div class="project">项目4</div>
</div>

.project {
  width: 100px;
  height: 50px;
  background-color: #ccc;
  border: 1px solid #000;
}

// 获取项目元素
var projects = document.getElementsByClassName('project');

// 遍历项目元素，为每个项目添加鼠标悬停事件处理函数
for (var i = 0; i < projects.length; i++) {
  projects[i].addEventListener('mouseover', function() {
    // 移除所有项目的突出显示样式
    for (var j = 0; j < projects.length; j++) {
      projects[j].classList.remove('highlight');
    }
    
    // 添加当前项目的突出显示样式
    this.classList.add('highlight');
  });
}

.highlight {
  background-color: #ff0000;
  border: 2px solid #000;
}