鼠标悬停#a时无法为#one设置样式，寻求解决方案（#one为#b子元素）

我来帮你梳理下问题所在，主要是HTML语法错误和CSS选择器逻辑不对导致的失效，下面分情况给出可行方案：

第一步：先修正你的HTML代码 #

你的原始HTML有两处语法错误，这会直接导致浏览器无法正确解析DOM结构，选择器自然找不到目标元素：

• 关闭div时不能写成</div id="a">，正确的标签写法是<div id="a"></div>
• id="one"的div没有正确闭合

根据你的需求（#b是#a的兄弟元素，#one是#b的子元素），修正后的基础HTML如下：

<body>
  <div id="a">我是元素A</div>
  <div id="b">
    <div id="one">我是要被设置样式的元素One</div>
  </div>
</body>

情况1：可以调整HTML元素顺序（纯CSS实现） #

CSS的兄弟选择器（+或~）只能选中当前元素之后的兄弟元素，所以只要把#a放在#b前面，就能用纯CSS实现需求：

/* 当#a悬停时，选中它后面的兄弟#b，再选中#b的子元素#one */
#a:hover ~ #b #one {
  background: white;
  /* 合并动画属性的简写，更简洁 */
  -webkit-animation: spin 1s ease-in-out infinite 1s;
  -moz-animation: spin 1s ease-in-out infinite 1s;
  animation: spin 1s ease-in-out infinite 1s;
  opacity: 1;
  transition-delay: 0s;
}

/* 旋转动画的关键帧，保留你的原有逻辑 */
@-moz-keyframes spin {
  100% { -moz-transform: rotate(180deg); }
}
@-webkit-keyframes spin {
  100% { -webkit-transform: rotate(180deg); }
}
@keyframes spin {
  100% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
}

这里的~是通用兄弟选择器，会匹配#a之后所有的#b兄弟元素；如果#a和#b是紧挨着的相邻兄弟，也可以用+选择器（#a:hover + #b #one），效果一致。

情况2：不能调整HTML元素顺序（用JavaScript实现） #

如果因为页面布局限制，必须让#b在#a前面，那纯CSS就做不到了——因为目前CSS没有前向兄弟选择器，没法选中当前元素之前的兄弟元素。这时候可以用JavaScript监听悬停事件来实现：

首先保留你的HTML结构（修正语法后）：

<body>
  <div id="b">
    <div id="one">我是要被设置样式的元素One</div>
  </div>
  <div id="a">我是元素A</div>
</body>

然后添加JS代码和对应的CSS类：

// 获取目标元素
const aEl = document.getElementById('a');
const oneEl = document.getElementById('one');

// 监听鼠标悬停事件，添加样式类
aEl.addEventListener('mouseover', () => {
  oneEl.classList.add('hover-active');
});

// 监听鼠标离开事件，移除样式类
aEl.addEventListener('mouseout', () => {
  oneEl.classList.remove('hover-active');
});

/* 定义悬停时的样式类 */
.hover-active {
  background: white;
  -webkit-animation: spin 1s ease-in-out infinite 1s;
  -moz-animation: spin 1s ease-in-out infinite 1s;
  animation: spin 1s ease-in-out infinite 1s;
  opacity: 1;
  transition-delay: 0s;
}

/* 保留旋转动画关键帧 */
@-moz-keyframes spin {
  100% { -moz-transform: rotate(180deg); }
}
@-webkit-keyframes spin {
  100% { -webkit-transform: rotate(180deg); }
}
@keyframes spin {
  100% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
}

关键提醒 #

一定要确保HTML标签的语法正确，任何闭合错误、属性写法错误都会导致浏览器解析DOM异常，最终让选择器或JS无法找到目标元素。

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