親のためにホバーする子供トリガーは、ホバー？

Question

親要素が1つ（この場合はボタン）あり、この親ボタンには5つの子ボタンがあります。ここでは、この

<div id="C_Btn3" class="AtlasRootButton multiButton1 AtlasCircleButton" style="height: 3rem; width: 3rem; line-height: 3rem;"> 
    <div class="fa fa-gamepad fa-3x"></div> 
    <div class="AtlasButton subButton AtlasCircleButton" style="position: relative; height: 3rem; width: 3rem; line-height: 3rem; display: inline-block; bottom: 8rem; left: -7rem;"></div> 
    <div class="AtlasButton subButton AtlasCircleButton" style="position: relative; height: 3rem; width: 3rem; line-height: 3rem; display: inline-block; bottom: 15.5rem; left: -1rem;"></div> 
    <div class="AtlasButton subButton AtlasCircleButton" style="position: relative; height: 3rem; width: 3rem; line-height: 3rem; display: inline-block; bottom: 17rem; left: 4.75rem;"></div> 
    <div class="AtlasButton subButton AtlasCircleButton" style="position: relative; height: 3rem; width: 3rem; line-height: 3rem; display: inline-block; bottom: 13.25rem; left: 4rem;"></div> 
    <div class="AtlasButton subButton AtlasCircleButton" style="position: relative; height: 3rem; width: 3rem; line-height: 3rem; display: inline-block; bottom: 17.75rem; left: -5rem;"></div> 
</div> 

、ここでのHTMLは、関連するCSSのは、私はそれがまた、トリガー子の1つにカーソルを合わせると、私は私の人生のために把握することはできません私の問題がある

.AtlasCircleButton { 
    padding: 0.75rem; 
    border-radius: 50%; 
    text-align: center; 
    vertical-align: middle; 
} 

.AtlasMultiCircleButton { 
    min-width: 1rem; 
    min-height: 1rem; 
    display: inline-block; 
    padding: 5px; 
    color: white; 
    background-color: black; 
    cursor: pointer; 
} 

.AtlasButton { 
    display: inline-block; 
    padding: 5px; 
    color: white; 
    background-color: black; 
    cursor: pointer; 
    transition: 0.3s; 
} 

.AtlasButton:hover { 
    color: black; 
    background-color: lightgrey; 
    transition: 0.3s; 
} 

.AtlasRootButton { 
    display: inline-block; 
    padding: 5px; 
    color: white; 
    background-color: black; 
    cursor: pointer; 
    transition: 0.3s; 
} 

.AtlasRootButton:hover { 
    color: black; 
    background-color: lightgrey; 
    transition: 0.3s; 
} 

.multiButton1 { 
    background-color: red; 
    color: white; 
} 

.multiButton1:hover { 
    background-color: blue; 
    color: white; 
} 

.subButton { 
    z-index: 99; 
} 

です親のためのホバーとこれは私が欲しいものではありません！私はこれがCSSのどこかであると推測していますが、私はこのトピックをグーグルで見つけ出すことができませんでした。

EDIT

私は、ルートボタンに独自の明確なクラスを与え、同じ問題が解決しません。私が発見したことの1つは、chrome開発ツールのsubButtonのホバーをトリガーするときに、ルートボタンのホバーがトリガーされないホバーチェックボックスをクリックすることです。あなたが要素にホバーを与えるあなたのケースの変更atlasbuttonに例えばspesificを作るatlasbutton.when

Answer 1

あなたの親のdivクラスと子のdivクラスがsame.Bothあるためには、次のとおりです。サブボタンにカーソルを移動：

ノートを置く：申し訳ありません私の悪い英語。