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

Question

假设我有这样的HTML：

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

还有一些类似的CSS：

.foo > div { display: none; }
.foo:after { /* rules */ }

我希望能够做一些类似的事情

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

以使用户将鼠标悬停在生成的内容元素上并显示子CCD_ 1。有人知道怎么做吗？到目前为止，我的尝试都没有结果。谢谢

Answer 1

这个问题似乎与我可以用兄弟组合子瞄准一个：before或：after伪元素吗？

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

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

a[href^="http"] img ~ :after

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

.foo:after > div

综上所述，以下选择器不起作用的原因是：

.foo:after:hover > div

有两个方面：

1. 伪元素不能具有伪类状态，从而使:after:hover无效。

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

如果您真的不能在.foo:hover上显示div，而是在另一个子元素上显示，那么在不使用JavaScript的情况下，您唯一的解决方法是在div0下制作另一个真实元素，该元素位于div之前（而不是之后）：

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

这是因为没有以前的同级选择器；可以用来代替:after >的相邻同级选择器仅用于选择下一个同级：

.foo > div:first-child + div { display: none; }
.foo > div:first-child { /* rules */ }
.foo > div:first-child:hover + div { display: block; }

Answer 2

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

.foo:hover > div { }

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

.foo:hover::after { }

但是，我怀疑，这可能不是你想做的任何事情

此外，您的选择器写为：.foo:after:hover > div我认为，将尝试为生成内容的div子级设置样式；这是不可能的。

Answer 3

你很接近。只需丢弃：after部分。

http://jsfiddle.net/QERPq/

更新：http://jsfiddle.net/QERPq/2/基本上，这意味着当你将鼠标悬停在这个项目上时，选择下一个项目（*=catchall）并显示它。

Answer 4

尝试此解决方案：http://jsfiddle.net/QERPq/4/.

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

HTML:

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

CSS:

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