event to modify sibling element

Question

In a web page, I have a grid of divs. In each div are 3 divs, the 2nd is hidden, I want it so that when the user hovers over the 3rd div, the 1st div becomes hidden and the 2nd is displayed.

I'm using 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

Your whoOn and whoOff methods can be combined like this:

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