Html 想要a：将鼠标悬停在一个区域中以修改a<；span>；在另一部分

我已经为此工作了一段时间，我没有找到一个好的答案

我有：

<section class="s-one">
  <section class="s-two">
    <a class="a-one>
    </a>
      .
      .
      .
  </section>
</section>

<section class="s-three">
  <ul class="ul-one>
    <li>
      <span>xxx</span>
    </li>
  </ul>
  .
  .
  .
</section>

---

并非每个单独的代码都对应于每个单独的

。对不起，如果我不清楚这一点；我很乐意提供澄清。

这里有一个快速的JS模型，展示您想要的行为

我是一个链接


我是个大傻瓜


.盘旋{
背景：黑色；
颜色：白色；
}
$（文档）.ready（函数（）{
$（'a'）。悬停（函数（）{
$（'span'）.toggleClass（“悬停”）；
});
});

下面是一个快速的JS模型，展示了您想要的行为

我是一个链接


我是个大傻瓜


.盘旋{
背景：黑色；
颜色：白色；
}
$（文档）.ready（函数（）{
$（'a'）。悬停（函数（）{
$（'span'）.toggleClass（“悬停”）；
});
});

在上面的代码中不能使用CSS。如果

span

恰好位于

之后，或者span是

的子项，则可以使用相邻同级选择器。这可以用JavaScript轻松完成。请注意，您缺少了一个

“

在

中，您不能在上述代码中使用CSS。如果

span

恰好位于

之后，或者span是

的子项，则可以使用相邻同级选择器。这可以用JavaScript轻松完成。请注意，在

.s-one:hover ~ .s-two span { display: block;},

<section class="s-one">
  <section class="s-two">
    <a class="a-one">I'm a link
      </a>
    </section>
  </section>

<section class="s-three">
  <ul class="ul-one">
    <li>
      <span>I'm a span</span>
      </li>
    </ul>
  </section>

.hovered{
  background: black;
  color: white;
}

$(document).ready(function(){
  $('a').hover(function(){
    $('span').toggleClass("hovered");
  });
});