Наведение курсора на дочерние триггеры для родителя?

Question

У меня есть один родительский элемент (кнопка в этом случае), и эта родительская кнопка имеет пять дочерних кнопок. Вот HTML для этого

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

и вот соответствующий CSS

.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, но я не мог найти ничего от googling этой темы, только вещи о том, что наведите указатель на ребенка, пытаясь вызвать стили наведения родителя, который полностью противоположный тому, что я хочу.

EDIT

Я дал кнопку ROOT свой собственный класс и тот же вопрос по-прежнему сохраняется. Одна вещь, которую я обнаружил, - это когда я запускаю зависание для subButtons в инструментах chrome dev, щелкнув флажок hover, зависание кнопки на корне не запускается, но не при обычном выполнении.

Answer 1

, потому что ваш родительский класс ДИВА и ребенок класс ДИВ является same.Both является atlasbutton.when вы даете зависать элементы сделать spesific, например, в вашем atlasbutton изменения случая: парить в subbutton: парить

примечания: жаль мой плохой английский.