下拉div没有出现在按钮悬停上，z索引也没有效果

Question

我正在React中用样式化组件构建一些东西。

当鼠标悬停一个按钮时，我试图用一个div下拉菜单来解释规则。

一切都处于良好的位置，但显示器：悬停时没有一个不会消失。

每次我尝试做这样的事情时，我都会遇到这种麻烦，我甚至复制了以前尝试的代码。我在网上找不到任何好的规则。如果有人能链接到一篇博客文章或网站，解释为什么会这样，或者向我解释，那将不胜感激。

JSX

<div className="rules-wrapper">
<button id="rules-btn">
<span role="img" aria-label="new game" className="hidden-icon">
❓
</span>
rules
</button>
<div className="rules-div">
<h2>RULES:</h2>
<p>Rule 1</p>
<p>Rule 2</p>
<p>Rule 1</p>
<p>Rule 1</p>
<p>Rule 1</p>
</div>
</div>

样式组件

button {
border: none;
background: none;
position: absolute;
width: 200px;
left: 50%;
left: 50%;
transform: translateX(-50%);
color: #555;
font-family: Lato;
font-size: 20px;
text-transform: uppercase;
cursor: pointer;
font-weight: 300;
transition: background-color 0.3s, color 0.3s;
}
.rules-wrapper {
left: 50%;
transform: translateX(-50%);
position: absolute;
display: inline-block;
}
#rules-btn {
top: 2rem;
}
#rules-btn:hover .rules-div {
display: flex;
}
.rules-div {
transform: translateX(-50%);
display: none;
position: absolute;
left: 50%;
top: 3.5rem;
width: 20rem;
transform: translateX(-50%);
background: white;
flex-direction: column;
z-index: 5;
border: 2px solid gray;
padding: 2rem;
align-items: center;
box-shadow: 5px 5px 5px gray;
}
button:hover {
font-weight: 600;
}
button:hover span {
margin-right: 20px;
}
button:focus {
outline: none;
}
span {
display: inline-block;
margin-right: 15px;
line-height: 1;
vertical-align: text-top;
transition: margin 0.3s;
}

Answer 1

看起来你已经尝试过了：

#rules-btn:hover .rules-div {
display: flex;
}

这将不起作用，因为.rules-div不是#rules-btn的child。但它紧挨着彼此(兄弟(，因此您可以使用相邻兄弟组合子

#rules-btn:hover + .rules-div {
display: flex;
}

Answer 2

感谢@95faf8e76605e973的帮助：

这将不起作用，因为.rulesdiv不是#rules btn的子级。但它紧挨着彼此(兄弟(，因此您可以使用相邻兄弟组合子

#rules-btn:hover + .rules-div {
display: flex;
}

对于z索引，我不得不添加

.rules-wrapper {
z-index: 5;
}