重要的是：

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

See a fiddle example.

请注意

一个简单的后代.HoverShow:hover :not(.HoverShow) .HoverHidden将不起作用，因为它会对没有.HoverShow类的任何后代元素产生积极的点击，因此this fiddle shows， 第三个组组他们上课。

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>

Fiddle Demo

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

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

Fiddle Demo

Answer 3

可以使用直接后代选择器来完成：

.HoverHidden 
{
    display: none;
}

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

工作原始HTML示例：http://jsfiddle.net/8enBe/
工作具有更深层结构的示例：http://jsfiddle.net/Eu93U/

重要的是：

要做到这一点，你需要保持像

这样的结构

<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选择器仅适用于具有最接近深度的后代

3 个答案:

重要的是：