(I'm aware there's a myriad of CSS selector questions already, yet I couldn't find an answer to this one, unfortunately; so please bear with me.)个
我有具有以下属性的HTML语言:
- 有些 node 将始终可见.它们可以嵌套.
- 这些 node 中的每个 node 总是恰好有一个"info子 node "，只有在其父 node 悬停时才会显示该 node .(可能存在其他非INFO子 node ，因为这些子 node 可以嵌套).
- 我要only the info for the currently hovered node to be shown exclusively美元.
示例(这里是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>到目前为止，这或多或少是有效的，但我的目标是一次只显示一个"信息 node "(即属于其父 node 的 node ).所以:
I select only the 100 whose parent is currently hovered(而不是它的祖先、sibling 姐妹或后代的那些；即，当 node D悬停时， node B的信息不能也被显示)怎么可能呢？