Ereignis zum Ändern Geschwisterelement

Question

In einer Webseite habe ich ein Raster von Divs. In jedem Div sind 3 Divs, der 2. ist versteckt, ich will es so, dass, wenn der Benutzer über das 3. Div schwebt, das 1. Div wird versteckt und das 2. Div wird angezeigt.

Ich benutze 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

Ihre whoOn und whoOff Methoden können wie folgt kombiniert werden:

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