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: 278
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