如何在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提供给父级，而不是button。

#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>