CSS选择器仅适用于具有最接近深度的后代

Question

我有两个班级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祖先时,事情变得更加复杂.

<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祖先下的HoverHidden深度没有规定.

Answer 1

纯css的最大问题是你最后的警告"请注意,我最近HoverShow祖先下没有关于HoverHidden深度的规则." 如果它在理论上确实是无限的,那么就不存在纯粹的css解决方案.如果对于HoverShow和之间的嵌套级别存在一些合理的,实际的限制HoverHidden,那么你可以像这样做css(这允许最多3个中间级别的嵌套,所以你可以看到这可能通过更多级别获得的不切实际):

.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;
}

看一个小提琴的例子.

请注意

一个简单的后代是.HoverShow:hover :not(.HoverShow) .HoverHidden行不通的,因为它会对没有等级的任何后代元素产生积极的打击.HoverShow,所以正如这个小提示所示,第三组确实显示在第二组的悬停上,因为插入的嵌套创建了"不要" .HoverShow上课了.

Answer 2

使用>，它只查看标记结构的下一层，而不是更深的一层。

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

小提琴演示

或者您可以尝试不更改标记，如下所示

.HoverShow:hover >div>.HoverHidden,.HoverShow:hover >.HoverHidden
{
    display: initial;
}
.HoverHidden
{
    display: none;
}

小提琴演示