0

假设我有这样的 HTML：

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

还有一些像这样的CSS：

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

我希望能够做类似的事情

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

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

4

4 回答 4

2

这个问题似乎与Can I target a :before or :after 伪元素与兄弟组合器相反？

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

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

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

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

.foo:after > div

所以总结一下，以下选择器不起作用的原因：

.foo:after:hover > div

是双重的：

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

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

如果您真的不能在 on 上显示您div的.foo:hover，而是在另一个子元素上显示，那么您在不使用 JavaScript 的情况下解决此问题的唯一方法是在该元素.foo之前（而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; }
于 2012-07-24T08:26:44.757 回答
1

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

.foo:hover > div { }

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

.foo:hover::after { }

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

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

于 2012-07-23T22:58:06.137 回答
0

你很亲密。只需放弃 :after 部分。

http://jsfiddle.net/QERPq/

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

于 2012-07-23T22:59:02.073 回答
0

试试这个解决方案：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;
}
于 2012-07-23T23:22:40.350 回答