仅选择悬停的级别，而不选择其父级或子级-解网

问：

（我知道已经有无数的CSS选择器问题，但不幸的是，我找不到这个问题的答案;所以请耐心等待。

我有具有以下属性的 HTML：

某些节点将始终可见。它们可以嵌套。
这些节点中的每一个始终只有一个“信息子节点”，该节点仅在其父节点悬停时显示。（可能还有其他非信息子节点，因为这些子节点可以嵌套）。
我只想以独占方式显示当前悬停节点的信息。

示例（下面是一个 JSFiddle）：

.always-visible {
  display: block;
}

.info-on-parent-hover {
  background-color: #ddd;
  font-weight: normal;
  font-style: italic;
  display: none;
}

.always-visible {
  font-weight: bold;
  background-color: #777;
}

.always-visible:hover {
  background-color: #3377cc;
}

.always-visible:hover>.info-on-parent-hover {
  display: block;
}

<div class="always-visible">
  node A [top-level node]
  <div class="info-on-parent-hover">some info about A</div>
</div>

<div class="always-visible">
  node B [top-level node]
  <div class="info-on-parent-hover">some info about B</div>

  <div class="always-visible">
    node C [child node of B]
    <div class="info-on-parent-hover">some info about C</div>
  </div>

  <div class="always-visible">
    node D [child node of B]
    <div class="info-on-parent-hover">some info about D</div>
  </div>
</div>

到目前为止，这或多或少是有效的，但我的目标是一次只显示一个“信息节点”（即属于其父节点的节点）。所以：

如何只选择当前悬停其父级的 div class=“.info-on-parent-hover”（而不是其祖先、兄弟姐妹或后代的父级;即当节点 D 悬停时，节点 B 的信息也不得同时显示）？

HTML CSS 选择器

.always-visible {
    display: block;
}
.info-on-parent-hover {
  background-color: #ddd;
  font-weight: normal;
  font-style: italic;
  display: none;
}
.always-visible {
  font-weight: bold;
  background-color: #777;
}
.always-visible .text-to-hover:hover {
  background-color: #3377cc;
}
.always-visible .text-to-hover:hover + .info-on-parent-hover {
    display: block;    
}

<div class="always-visible">
  <div class="text-to-hover">
  node A [top-level node]</div>
  <div class="info-on-parent-hover">some info about A</div>
</div>

<div class="always-visible">
  <div class="text-to-hover">
  node B [top-level node]
  </div>
  <div class="info-on-parent-hover">some info about B</div>
  
  <div class="always-visible">
  <div class="text-to-hover">
    node C [child node of B]
    </div>
    <div class="info-on-parent-hover">some info about C</div>
  </div>

  <div class="always-visible">
  <div class="text-to-hover">
  node D [child node of B]</div>
    <div class="info-on-parent-hover">some info about D</div>
  </div>
</div>

此选择器可在悬停同级元素时有效地隐藏元素。但是，需要注意的是，并非所有浏览器都支持伪类，因此其使用可能会受到限制。在不支持它的浏览器中，您可能需要使用基于 JavaScript 的解决方案。.info-on-parent-hover.always-visible:has()

仅选择悬停的级别，而不选择其父级或子级

Select only level being hovered, but not its parents or children

评论

评论

评论