克隆一個事業部多次，然後選擇所有div除了一個是盤旋（CSS，JS，HTML）

Question

我有一些HTML/Javascript，看起來喜歡這樣的：

   <div id="columns-container"> 
        <div class="reason-container" id="reason-x"> 
         <div class="reason"> 
          <div class="right-side"></div> 
          <div class="bottom-side"></div> 
          <div class="front-side"><div class="reason-text"></div></div> 
         </div> 
        </div> 
       </div> 



      <script type="text/javascript"> 
       for(var i=0; i<5; i++){ 
        $(".reason-container:first").clone().appendTo("#columns-container").attr('id', ("reason" + i)); 
       } 
      </script> 

它採用一組我創建的div（右側，底部，正面）看起來像一個列和克隆他們，給他們每個唯一的ID（＃reason0，＃reason1等）

在CSS中，我試圖選擇所有列，除了一個正在上空盤旋，像這樣：

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

但是，如果第一個克隆將被懸空，並且此類（.reason-container）的所有其他實例都將設置爲「display：none」，但這隻會選擇目標之後的同級。這意味着如果＃reason1被用來代替，原因＃0和＃reason-x將保持「顯示：塊」，而＃reason2 - ＃reason4將是「顯示：無」......我不明白爲什麼這是，任何洞察力將非常感謝。謝謝。

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。僅供參考。

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> 

去關一下HuskyBlue的建議，我與潛在的解決方案修修補補周圍，這個就像我希望它其中工程上來。