如何通过JS更改悬停时直接相邻兄弟元素的CSS？

通过JS更改悬停时直接相邻兄弟元素的CSS可以使用以下步骤：

首先，使用JavaScript获取到需要更改CSS的元素。可以使用document.getElementById()、document.getElementsByClassName()或document.querySelector()等方法来获取元素。
使用事件监听器（例如addEventListener()）来监听鼠标悬停事件。当鼠标悬停在目标元素上时，触发相应的事件处理函数。
在事件处理函数中，使用JavaScript选择器（例如nextElementSibling、previousElementSibling等）获取到需要更改CSS的相邻兄弟元素。
使用JavaScript修改相邻兄弟元素的CSS属性。可以使用元素的style属性来直接修改CSS属性，例如element.style.property = value。

以下是一个示例代码：

// 获取目标元素
var targetElement = document.getElementById('target');

// 监听鼠标悬停事件
targetElement.addEventListener('mouseover', function() {
  // 获取相邻兄弟元素
  var siblingElement = targetElement.nextElementSibling;

  // 修改相邻兄弟元素的CSS属性
  siblingElement.style.color = 'red';
  siblingElement.style.backgroundColor = 'yellow';
});

targetElement.addEventListener('mouseout', function() {
  // 获取相邻兄弟元素
  var siblingElement = targetElement.nextElementSibling;

  // 恢复相邻兄弟元素的原始CSS属性
  siblingElement.style.color = '';
  siblingElement.style.backgroundColor = '';
});

在上述示例中，当鼠标悬停在targetElement上时，会将其相邻兄弟元素的文字颜色修改为红色，背景颜色修改为黄色。当鼠标移出targetElement时，相邻兄弟元素的CSS属性会恢复到原始状态。

请注意，以上示例中的targetElement是一个示例元素的ID，你需要根据实际情况修改为你的HTML代码中的目标元素。