CSS :first-line伪类是否可以添加:hover？

Question

我一直在为HTML标记调整CSS。我面临的问题是已经使用CSS伪类:first-line应用了样式。我想要的是在悬停状态下更改此第一行的样式。是否有一种方式可以应用类似于p:first-line:hover的东西？

- khalid

Answer 1

在定义链式样式p:first-line:hover之前，您必须先定义p:first-line，如下所示：
p:first-line { color: black; }
p:hover:first-line { color: red; }

样例链接

- JimmyRare

---

对我来说，在Chrome 27中可以工作。 - ThinkingStiff

太棒了！它完美地运行了。已在Firefox 19、Chrome 25和IE 9中进行测试。 - khalid

Answer 2

非常有趣的话题！我尝试了一个jQuery版本，发现即使这样也不起作用。在Firefox中，必须首先应用类才能在悬停时工作，如您可以在此Fiddle中看到。但是WebKit完全忽略了动态类添加的:first-line。

<p class="hovered">Text .... </p>

对于Firefox，类必须在HTML代码中设置。现在，以下代码可以完成此操作。

jQuery('p').removeClass('hovered');

jQuery('p').hover(function() {
    jQuery(this).addClass('hovered');
}, function() {
    jQuery(this).removeClass('hovered');
});

但在WebKit中无法工作。

- Linus Caldwell

Answer 3

是的，你可以将它们链接在一起（在这里看看）。

p:hover:first-line

- Alyce

---

至少在Firefox和Chrome中，这似乎不起作用：http://jsfiddle.net/gMRVf/ - Linus Caldwell