无前置兄弟CSS选择器时，hover<a>如何修改前置<div>样式？

纯CSS方案（适配现代浏览器） #

如今:has()选择器的浏览器支持度已经足够广泛，你可以直接通过它实现需求：

section:has(> a:hover) > div {
  /* 示例样式，替换成你需要的修改 */
  color: #ff4400;
  background-color: #f5f5f5;
}

如果需要兼容旧版浏览器，这个方案不适用，建议用下面的JS方案。

简单JavaScript方案（全浏览器兼容） #

通过原生JS监听链接的鼠标事件，给目标div添加/移除样式类即可：

步骤1：定义样式类 #

.div-active {
  /* 这里写hover时要应用的样式 */
  font-size: 1.1em;
  font-weight: 600;
}

步骤2：添加JS事件监听 #

const hoverLink = document.querySelector('section > a');
const targetDiv = document.querySelector('section > div');

hoverLink.addEventListener('mouseover', () => {
  targetDiv.classList.add('div-active');
});

hoverLink.addEventListener('mouseout', () => {
  targetDiv.classList.remove('div-active');
});

这个方案兼容性拉满，代码逻辑简单，不需要依赖任何框架。

内容的提问来源于stack exchange，提问作者Innarq