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

修改

我给了root按钮它自己独特的类，同样的问题仍然存在。我发现的一件事是当我通过单击悬停复选框触发chrome dev工具中的subButtons的悬停时，根按钮悬停不会被触发，但在正常操作时则不会。

Answer 1

因为你的父div类和子div类是相同的。它们是atlasbutton.when你将鼠标悬停给元素make spesific例如在你的情况下改变atlasbutton：hover to subbutton：hover

注意：抱歉我的英语不好。

父母的悬停子触发器悬停？

1 个答案: