Css 访问相对于生成内容的子元素

假设我有这样的HTML：

<div class="foo">
    <div>Stuff</div>
</div>

我希望能够做一些像

.foo:after:hover > div { display: block; }

---

让用户将鼠标悬停在生成的内容元素上并显示子元素

div

。有人知道怎么做吗？到目前为止，我的尝试都是徒劳的。谢谢。

您不能与生成的内容交互，因为它不在DOM中（可以访问，但至少到目前为止，它是只读的）；您唯一的选择是使用

：将
悬停在
上。foo
本身：

.foo:hover > div { }

当然，您可以在
：hover
上对生成的内容进行不同的样式设置：

.foo:hover::after { }

但是，我怀疑，这可能不是你想做的事情的一部分

另外，您的选择器如所写：
.foo:after:hover>div
我认为，将尝试为生成内容的
div
子级设置样式；它不能拥有。
您不能与生成的内容交互，因为它不在DOM中（可以访问，但至少到目前为止，它是只读的）；您唯一的选择是使用
：将
悬停在
上。foo
本身：

.foo:hover > div { }

当然，您可以在
：hover
上对生成的内容进行不同的样式设置：

.foo:hover::after { }

但是，我怀疑，这可能不是你想做的事情的一部分

另外，您的选择器如所写：
.foo:after:hover>div
我认为，将尝试为生成内容的
div
子级设置样式；这是不可能的。
你很接近。把那部分扔了吧


更新：
基本上，这表示当您将鼠标悬停在该项目上时，要选择下一个项目（*=catchall）并显示它。
您已经接近了。把那部分扔了吧


更新：
基本上，这表示当您将鼠标悬停在该项目上时，要选择下一个项目（*=catchall）并显示它。
请尝试以下解决方案：

这可能是你想要的，也可能不是

HTML:

<div class="foo">pre-hover stuff</div>

.foo > div {
    display: none;
    font-size: 200px;
}
.foo:after {
    content: '';
    display: block;
    position: absolute;
    left: 100px;
    top: 100px;
    width: 100px;
    height: 20px;
    background: yellow;
}
.foo:hover:after {
    display: block;
    content: 'Stuff';
    width: 40px;
    height: 40px;
    background: red;
}

请尝试此解决方案：

这可能是你想要的，也可能不是

HTML:

<div class="foo">pre-hover stuff</div>

.foo > div {
    display: none;
    font-size: 200px;
}
.foo:after {
    content: '';
    display: block;
    position: absolute;
    left: 100px;
    top: 100px;
    width: 100px;
    height: 20px;
    background: yellow;
}
.foo:hover:after {
    display: block;
    content: 'Stuff';
    width: 40px;
    height: 40px;
    background: red;
}

这个问题似乎与我们的观点相反

在您的情况下，不能将伪类应用于伪元素。这也意味着您不能仅在伪元素处于启用状态时才选择应用样式，而不能在其生成元素处于启用状态时选择应用样式。相反，您只能根据其生成元素的伪类状态选择伪元素，并且仅当该生成元素是选择器的主题时

另外，如前所述，伪元素不是DOM的一部分。因此，与我对上述问题的回答（在上面的链接中进行解释）中所示的在同一个生成元素中无法访问相对于真实子元素的伪元素类似：

不能相对于同一生成元素中的伪元素选择实元素：

.foo:after > div

总之，以下选择器无法工作的原因如下：

.foo:after:hover > div

有两个方面：

伪元素不能具有伪类状态，使
：after:hover
无效

此处选择器的主题不是
.foo
，而是
div
，因此
：after
不能应用于
.foo
。因此，在将伪元素应用于另一个选择器之后，尝试选择真实元素作为选择器的主题是没有意义的

如果确实不必在
.foo:hover
上显示
div
，而是在另一个子元素上显示，那么不使用JavaScript的唯一方法是在
.foo
下创建另一个位于
div
之前（而不是之后）的真实元素：

这个问题似乎与我们的观点相反

在您的情况下，不能将伪类应用于伪元素。这也意味着您不能仅在伪元素处于启用状态时才选择应用样式，而不能在其生成元素处于启用状态时选择应用样式。相反，您只能根据其生成元素的伪类状态选择伪元素，并且仅当该生成元素是选择器的主题时

另外，如前所述，伪元素不是DOM的一部分。因此，与我对上述问题的回答（在上面的链接中进行解释）中所示的在同一个生成元素中无法访问相对于真实子元素的伪元素类似：

不能相对于同一生成元素中的伪元素选择实元素：

.foo:after > div

总之，以下选择器无法工作的原因如下：

.foo:after:hover > div

有两个方面：

伪元素不能具有伪类状态，使
：after:hover
无效

此处选择器的主题不是
.foo
，而是
div
，因此
：after
不能应用于
.foo
。因此，在将伪元素应用于另一个选择器之后，尝试选择真实元素作为选择器的主题是没有意义的

如果确实不必在
.foo:hover
上显示
div
，而是在另一个子元素上显示，那么不使用JavaScript的唯一方法是在
.foo
下创建另一个位于
div
之前（而不是之后）的真实元素：

我不想放弃
：之后的
。这是我要悬停的部分。同样，我想要
：之后的
部分。你的小提琴没有任何生成的内容：\哦，我感觉我又错过了。您想将鼠标悬停在“morecontent”区域上，并在.foo？内显示div，假设生成了morecontent。@Torr3nt:这不是“生成的内容”的CSS定义；这只是使用JS向DOM添加新元素，而与CSS无关。请参阅以了解CSS生成的内容是什么。我不想放弃
：after
。这是我要悬停的部分。同样，我想要
：之后的
部分。你的小提琴没有任何生成的内容：\哦，我觉得我错过了它