javascript - event to modify sibling element -

in web page, have grid of divs. in each div 3 divs, 2nd hidden, want when user hovers on 3rd div, 1st div becomes hidden , 2nd 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 codepen

your whoon , whooff methods can combined 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(); }