事件修改兄弟元素

Question

在网页中，我有一个div网格。在每个div中有3个div，第2个是隐藏的，我想要它，当用户将鼠标悬停在第3个div上时，第1个div变为隐藏状态，第2个div显示。

我正在使用jquery。

<div class="container">
  <div class="hello">hello</div>
  <div class="who">sailor
  </div>
  <div onmouseover="whoOn();" onmouseout="whoOff();" class="hover">hover me</div>
</div>

<div class="container">
  <div class="hello">hello</div>
  <div class="who">dolly
  </div>
  <div onmouseover="whoOn();" onmouseout="whoOff();" class="hover">hover me</div>
</div>

<div class="container">
  <div class="hello">hello</div>
  <div class="who">kitty
  </div>
  <div onmouseover="whoOn();" onmouseout="whoOff();" class="hover">hover me</div>
</div>

Here's a Codepen

Answer 1

你的whoOn和whoOff方法可以这样组合：

<div class="container">
  <div class="hello">hello</div>
  <div class="who">sailor
  </div>
  <div onmouseover="whoBoth(this);" onmouseout="whoBoth(this);" class="hover">hover me</div>
</div>

使用Javascript：

function whoBoth(target) {
  $(target).siblings(".hello, .who").toggle();
}