html - 如何反转 CSS 中的选择器组合？

Question

在当前元素中我使用了两个 html 标签。第二个默认是隐藏的。如果将鼠标悬停在第一个上，第二个将出现。如果您越过现在可见的第二个，它会保持打开状态。

#button{
  background:#050;
  width:200px;
  height:30px;
  line-height:30px;
  text-align:center;
  cursor:pointer;
}
#button{
  color:white;
  text-decoration:none;
}

#button:hover{
  color:#ff4;
  text-decoration:none;
}

#subfield{
  width:500px;
  height:300px;
  background:#777;
}

#button + #subfield{
  display:none;
}

#button:hover + #subfield{
  display:block;
}

#button + #subfield:hover{
  display:block;
}

<div id="button">Menu Button</div>
<div id="subfield"></div>

效果很好。但第一个 html 标签本身就有悬停效果。如何在转到其他 html 标签时保持这种悬停效果？

Answer 1

您在 CSS 中没有父选择器或上一个选择器。简单的修复，将 :hover 作为两者的父级:

1. 给定一个父 div。
2. 应用display: inline-block。
3. 将 :hover 赋予父级，而不是按钮。

#parent {
  display: inline-block;
}
#button {
  background: #050;
  width: 200px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  cursor: pointer;
}
#button {
  color: white;
  text-decoration: none;
}
#parent:hover #button {
  color: #ff4;
  text-decoration: none;
}
#subfield {
  width: 500px;
  height: 300px;
  background: #777;
}
#button + #subfield {
  display: none;
}
#button:hover + #subfield {
  display: block;
}
#button + #subfield:hover {
  display: block;
}

<div id="parent">
  <div id="button">Menu Button</div>
  <div id="subfield"></div>
</div>