Is there a way to add :hover to CSS :first-line pseudo-class?

Question

I've been tinkering with some css for an HTML markup. The problem I am facing is that there is a style already applied using CSS :first-line pseudo-class. What I want is to change the style of this first line on hover state. Is there a way to apply something like p:first-line:hover ?

Answer 1

You have to define the p:first-line before you can define the chain p:first-line:hover like so:
p:first-line { color: black; }
p:hover:first-line { color: red; }

Fiddle

Answer 2

Very fascinating topic! I tried a jQuery version and found out, that even that won't work. In Firefox, the class has to be applied first to work on hover, as you can see in this Fiddle. But WebKit completely ignores the :first-line on dynamic class adding.

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

For Firefox the class has to be set in the HTML code. Now, the following does the job.

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

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

But won't work in WebKit.