Javascript 事件来修改同级元素

在网页中，我有一个div网格。在每个div中有3个div，第2个div是隐藏的，我希望这样，当用户将鼠标悬停在第3个div上时，第一个div变为隐藏，第2个显示

我正在使用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>

你好
水手
盘旋我
你好
多莉
盘旋我
你好
基蒂
盘旋我

---

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

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