Html .显示的类：无->。类：带显示的焦点：块；导致链接不起作用

我正在尝试创建各种选项菜单。当用户单击一个框时，第一个框中会出现一个带有链接的内部框。注意：此内部（第二个）框非常重要。单击远离此第一个框或单击另一个框将隐藏第一个框的内部框

第二个框中的链接无法打开网页（即使目标设置为_blank），而是隐藏了内部框

我只能通过使用：focus with display:none->display:block获得显示/隐藏切换内框功能

单独的例子：

链接应该可以工作，理想情况下，内框将保持不变，但是链接不工作，内框隐藏。我的目标是：

• 让这些框（div）在单击时显示内部框（div）
• 当单击远离或在另一个隐藏内部框的框上单击时
• 在内部框（div）内存在一个功能链接，该链接可使内部框在单击后保持可见

---

理想情况下，这一切只需HTML和CSS即可完成，但目前我对一些低成本脚本持开放态度。

不知道这是否适用于您的用例，但您可以通过将CSS更改为以下内容来“欺骗”它：

.box:focus .inner_box,
.box:focus-within .inner_box,
.inner_box:hover {
  display: block;
}

因此，只要鼠标仍在div上悬停，框就不会关闭

按OP注释更新：考虑使用<代码>：<<代码> > <代码>：焦点< /COD>保持DIV可见，只要有子元素有焦点（不在边上工作）

---

但是）

可能的重复-感谢您的建议。它在codepen示例中起作用，但在我的实际部署中不起作用。我会继续修补它，然后再给你回复。看起来像是在同一个显示器上使用.box:focus、.box:focus in的技巧：块样式。现在一个物体聚焦在它里面会触发同样的事件！！谢谢你带我去修理。请更新您的答案，我会将其标记为正确。

.container {

}

.box, .nohide_box {
  padding: 20px;
  border: 1px solid black;
  float: left;
  background-color: pink;
}

.inner_box {
  display: none;
  background-color: wheat;
  padding: 10px 0;
}

.box:focus .inner_box {
  display: block;
}

.nohide_box {
  background-color: lightgreen !important;
}

.box:focus .inner_box,
.box:focus-within .inner_box,
.inner_box:hover {
  display: block;
}