Geek Answers Handbook

Get: first letter: hover element with CSS

Is it possible to get the first letter of an element during "hover mode"? Here's what it will look like - I think - but it doesn't work in Chrome 10:

p:hover:first-letter

or

p:first-letter:hover

Technically (imho) they are not the same. The first takes the first letter of the hovering element. The second takes the whole element if the first letter is in the air. I demand the first.

As you can see at http://css4.hotblocks.nl , if you enable “CSS blocks”, both do not work.

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

- edit I have changed my online example for the better. CSS is now divided into separate blocks <style>. Makes samples easier to turn on and off.

The conclusion is still !? - is: In Firefox 3.6 / 4 a:first-letter:hoveranything (good) and a:hover:first-letternothing works (good!). In Chrome 10, a:first-letter:hovernothing (good) a:first-letter:hoverdoes not undo the previous CSS 'statement. (In my example, this does not break anything, because it is in a separate block <style>.) This leads us to: once again, Google Chrome lags behind Firefox = (--edit

+5
source share
2 answers

I checked your example, and I have to say that it works, on Fx 3.6.13

p:hover:first-letter {
    color: blue
}

, , . , , .

+4

:first-line :first-letter , . a , :first-letter , . , Chrome , , , , W3C , .

, , , a {display: inline-block} , .

+4

More articles:


All Articles