クローンの一つ本部複数回は、その後、私が持っている

Question

一つである推移オーバー（CSS、JS、HTML）を除いて好きこのように見えるいくつかのHTML/JavaScriptをすべてのdivを選択します私が作成したdiv（右、下、正面）は、列のように見えるようにしてクローンし、それぞれに一意のID（＃reason0、＃reason1など）を与えます。上に乗っているもの以外のすべての列を選択する：

#reason0:hover ~ .reason-container:not(#reason0) { 
    display: none; 
} 

最初のクローンがホバリングされ、このクラスの他のすべてのインスタンス（.reason-container）は "display：none"に設定されますが、これはターゲットとされた後の兄弟を選択するだけです。 ＃reason1が代わりに使用された場合、reason＃0と＃reason-xは "display：block"のままとなり、＃reason2 - ＃reason4は "display：none"となります。どんな洞察も高く評価されます。ありがとうございました。

Answer 1

セレクタは、の後、兄弟をDOM内でのみ選択します。あなたの場合、フォーカスしている兄弟は#reason0:hoverになります。兄弟コンビネータの詳細については、this answerを参照してください。

の回避策として、あなたは、このソリューションをどう思いますか：

$("#reason0").hover(function() { 
    $(".reason-container").each(function() { 
     $(this).css({"display": "none"}); 
    }); 
    $(this).css({"display": "block"}); 
}); 

をところで、:not()セレクタはvery poor browser supportを持っています。ちょうどFYI。 HuskyBlueが提案するもののオフに行く

Answer 2

<script type="text/javascript"> 
     $("#reason0").hover(function() { 
      $(".reason-container").each(function() { 
       $(this).css({"display": "none"}); 
      }); 
      $(this).css({"display": "block"}); 
     }, 
     function() { 
      $(".reason-container").each(function() { 
       $(this).css({"display": "block"}); 
      }) 
     }); 
    </script> 

、私は潜在的な解決策で周りに手を加えて、私はそれがしたいだけのように動作しているこの思い付きました。