Question

假设我有这样的HTML：

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

有些CSS喜欢这样：

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

我希望能够做类似

的事情

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

让用户将鼠标悬停在生成的内容元素上并显示子div。有谁知道如何做到这一点？到目前为止，我的尝试都没有结果。感谢。

Answer 1

这个问题似乎与Can I target a :before or :after pseudo-element with a sibling combinator?

相反

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

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

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

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

.foo:after > div

总而言之，以下选择器不起作用的原因是：

.foo:after:hover > div

是双重的：

伪元素不能具有伪类状态，导致:after:hover无效。
此处选择器的主题不是.foo，而是div，因此:after无法应用于.foo。因此，在将伪元素应用到另一个选择器之后尝试选择一个真实元素作为选择器的主题是没有意义的。

如果你真的不能在div上显示.foo:hover，而是在另一个子元素上显示，那么在不使用JavaScript的情况下解决这个问题的唯一方法是在.foo下创建另一个真实元素来自之前 div（不是之后的）：

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

这是因为there is no previous sibling selector;相邻的兄弟选择器，您可以使用它代替:after >仅用于选择 next 兄弟：

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

Answer 2

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

.foo:hover > div { }

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

.foo:hover::after { }

但是，我怀疑，这可能不是你想要做的任何部分。

另外，你的选择器：.foo:after:hover > div我认为，会尝试设置生成内容的div子项的样式;它不能拥有。

Answer 3

你很亲密。只是放弃了：部分之后。

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

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

4 个答案: