希望a:悬停在一个区段中以修改另一节中的<span>

Question

我在这方面工作了一段时间，但我并没有找到一个很好的答案。

我有：

<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>

当我悬停在任何一个元素上来修改它时，我还想修改相应的span元素( ul "ul-one“中的span是”a-1“对，等等)。

我尝试过各种选择器和组合器，到目前为止，我所能得到的就是使用以下方法修改s-3中的所有跨度：

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

并不是每一个个体都对应于每一个<a>。如果我对此不清楚，很抱歉，我很乐意作出澄清。

Answer 1

这里有一个快速的JS模拟，显示了您想要的行为。

http://codepen.io/anon/pen/WQGoej

<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");
  });
});