仅应用于具有最接近深度的子体的CSS选择器

我有两个类：HoverShow和HoverHidden。
HoverHidden元素应至少有一个HoverShow祖先，并且仅在最近的HoverShow祖先悬停时显示

.HoverHidden 
{
    display: none;
}

.HoverShow:hover .HoverHidden
{
    display: initial;
}

<div class="HoverShow">
    <div>
        Hover here to see message!
        <div class="HoverHidden">
            message!
        </div>
    </div>
</div>

.HoverHidden
{
显示：无；
}
.HoverShow:hover.HoverHidden
{
显示：首字母；
}
将鼠标悬停在此处查看消息！
消息

上面的方法很好用

但是当HoverHidden有几个HoverShow祖先时，事情就变得更复杂了

<div class="HoverShow">
    <div>
        Hover here to see message!
        <div class="HoverHidden">
            message!
            <div class="HoverShow">
                Now hover here to see another message!
                <div class="HoverHidden">
                    another message!
                    <br />
                    Hey, wait... you shouldn't see that yet!
                </div>
            </div>
        </div>
    </div>
</div>

将鼠标悬停在此处查看消息！
消息
现在将鼠标悬停在此处查看另一条消息！
另一条消息！


嘿，等等。。。你还不应该看到这个！

我如何调整CSS使其工作

---

请注意，我没有关于隐藏在其最近的HoverShow祖先下的悬停深度的规则。

使用

，它只在标记结构的下一层查看，没有更深的层次

.HoverShow:hover>.HoverHidden
{
    display: initial;
}

为了做到这一点，您需要对标记做一些细微的更改

<div class="HoverShow">
    Hover here to see message!
    <div class="HoverHidden">
        message!
        <div class="HoverShow">
            Now hover here to see another message!
            <div class="HoverHidden">
                another message!
                <br />
                Hey, wait... you shouldn't see that yet!
            </div>
        </div>
    </div>
</div>

---

可以使用直系后代选择器执行此操作：

.HoverHidden 
{
    display: none;
}

.HoverShow:hover > .HoverHidden{
    display: initial;
}

使用原始HTML的示例：
工作具有更深层结构的示例：

重要： 做这项工作，你需要保持结构像

<div class="HoverShow">
    <!-- next .HoverHidden descendant of this MUST BE a DIRECT descendant -->
    <div class="HoverHidden">
        <!-- next .HoverShow descendant of this MUST BE a DIRECT descendant -->
    </div>    
</div>

如果不保留此结构，它将无法工作：）

---

希望这能有所帮助。

纯css的最大问题是“请注意，我没有关于隐藏在最接近的HoverShow祖先下的悬停深度的规则。”如果理论上它确实是无限的，那么就不存在纯css解决方案。如果

HoverShow

和

HoverHidden

之间的嵌套级别有一些合理、实用的限制，那么您可以这样做css（这最多允许3个中间级别的嵌套，因此您可以看到，如果级别太多，这会变得多么不切实际）：

请注意

---

一个简单的子代

。HoverShow:hover:not（.HoverShow）。HoverHidden

将不起作用，因为它将对任何没有

。HoverShow

类的子代元素产生积极的影响，因此，第三个组不会显示在第二个组的悬停上，因为中间的嵌套创建了不“not”的元素将

.HoverShow

类放在它们上面。

对于给定的标记，它不能用于第一级。问题是问题指定了“我没有关于最接近的HoverShow祖先下隐藏的HoverShow深度的规则。”因此，只有在中间层没有其他包装器的情况下，这种方法才有效。首先，如果可能的话，使html保持一致。然后它将与@Pranav C Balan的答案一起工作below@Serge有什么理由不使用jQuery来实现这一点吗？（只是问一下）在CSS中使用它更有意义，它应该更紧凑，更易于维护。我知道这可以在JQuery中完成，但我只会在最后的手段下完成。

<div class="HoverShow">
    <!-- next .HoverHidden descendant of this MUST BE a DIRECT descendant -->
    <div class="HoverHidden">
        <!-- next .HoverShow descendant of this MUST BE a DIRECT descendant -->
    </div>    
</div>

.HoverShow:hover > .HoverHidden,
.HoverShow:hover > :not(.HoverShow) > .HoverHidden,
.HoverShow:hover > :not(.HoverShow) > :not(.HoverShow) > .HoverHidden,
.HoverShow:hover > :not(.HoverShow) > :not(.HoverShow) > :not(.HoverShow) > .HoverHidden
{
    display: initial;
}