兄弟要素を変更するイベント

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