悬停的孩子触发父母的悬停？ [复制]

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中的某个地方，但我无法从谷歌搜索这个主题中找到任何东西，只有关于让孩子的悬停试图触发父母的悬停样式的事情，这与我想要的完全相反。

编辑

我为根按钮赋予了自己独特的类，但同样的问题仍然存在。我发现的一件事是，当我通过单击悬停复选框触发 chrome 开发工具中子按钮的悬停时，根按钮悬停不会被触发，但在正常执行时不会触发。

Answer 1

因为您的父 div 类和子 div 类是相同的。两者都是 atlasbutton。当您将鼠标悬停在元素上时，例如在您的情况下将 atlasbutton:hover 更改为 subbutton:hover

注意：对不起，我的英语不好。