<分区>
<分区>
我有一个父元素(在本例中为一个按钮)，这个父按钮有五个子按钮。这是这个的 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;
}
我终生无法解决的问题是，当我将鼠标悬停在其中一个 child 上时，它也会触发 parent 的悬停，这不是我想要的!我猜这是在 css 的某个地方，但我无法通过谷歌搜索这个主题找到任何东西，只有关于让 child 的悬停试图触发 parent 的悬停样式的事情，这与我想要的完全相反。
编辑
我为根按钮赋予了自己独特的类，但同样的问题仍然存在。我发现的一件事是，当我通过单击悬停复选框触发 chrome 开发工具中子按钮的悬停时，根按钮悬停不会被触发，但在正常情况下不会触发。
最佳答案
因为您的父 div 类和子 div 类是相同的。两者都是 atlasbutton。当您将鼠标悬停在元素上时，例如在您的情况下将 hover 更改为 atlasbutton:hover 到 subbutton:hover
注意:抱歉我的英语不好。
关于html - 悬停的 child 会触发 parent 的悬停吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41855004/