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中的跨度”a-one“对，等等。）

我尝试过各种各样的选择器和组合器，到目前为止我只能使用以下方法修改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");
  });
});

想要a：将鼠标悬停在一个部分中以修改其他部分中的<span>

1 个答案: