有没有办法在元素悬停时将样式应用于 CSS ::first-line 伪类

Question

我一直在为 HTML 标记修改一些 CSS。我面临的问题是已经使用 CSS

::first-line

伪类应用了一种样式。我想要的是改变悬停状态下第一行的样式。有没有办法应用类似

p::first-line:hover

之类的东西？

Answer 1

您必须先定义

p::first-line

，然后才能定义链

p::first-line:hover

，如下所示：

p::first-line { color: black; }   p:hover::first-line { color: red; }

JSFiddle 演示

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 中不起作用。

Answer 3

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

p:hover:first-line