Get :first-letter of :hover element with CSS

Posted by Rudie on Stack Overflow See other posts from Stack Overflow or by Rudie
Published on 2010-12-24T22:37:26Z Indexed on 2010/12/25 0:54 UTC
Read the original article Hit count: 282

Filed under:
|
|
|

Is it possible to get the first letter of an element while in 'hover mode'? This is how it would look - I think - but it's not working in Chrome 10:

a:hover:first-letter

or

a:first-letter:hover

Technically (imho) they're not the same. The first takes the first letter of the hovering element. The second takes the entire element if the first letter is hovering. I require the first.

As you can see on http://css4.hotblocks.nl (if you have a 1900px screen and a dom inspector) if you uncomment the CSS, both don't work.

I want only the first letter of the element to color red, when the entire element is in :hover mode. Is it possible without additional HTML tags? Thanks.

-- edit I've changed my online example for the better. CSS is now divided in separate <style> blocks. Makes for easier turning on and off try-outs.

Conclusion - so far!? - is this: In Firefox 3.6/4 a:first-letter:hover does nothing (good) and a:hover:first-letter works perfectly (good!). In Chrome 10 a:first-letter:hover does nothing (good) and a:first-letter:hover breaks the previous CSS 'statement'. (In my example it breaks nothing because it's in a separate <style> block.) Which brings us to: once again Google Chrome lags behind Firefox =( --edit

© Stack Overflow or respective owner

Related posts about css

Related posts about hover