1

I know it is possible to do this

.parent:hover:before {
  color: 'blue';
}

But is it possible to listen for the hover on the pseudo element itself?

.parent:before:hover {
  color: 'blue';
}

Edit

Okay so it's impossible. Can anyone explain why?

plondon
  • 492
  • 3
  • 10
  • 1
    http://stackoverflow.com/questions/5777210/how-to-write-hover-condition-for-abefore-and-aafter – Jack Jan 13 '15 at 17:28
  • 1
    That first chunk of code isn't CSS. What is that, less or sass? – j08691 Jan 13 '15 at 17:29
  • 1
    even though the dupe question isn't exactly the same, you will find an answer in it. – web-tiki Jan 13 '15 at 17:34
  • Thank you web-tiki, found my answer after reading more carefully. Should I delete my question? – plondon Jan 13 '15 at 17:35
  • 1
    You don't have to - duplicates can serve as signposts for future searchers. That said, I thought I'd let you know that I've just updated my answer in the linked question. Hopefully it addresses your follow-up question. – BoltClock Jan 13 '15 at 17:40

1 Answers1

1

You have your selectors the wrong way round. try:

.parent:hover:before {
  color: 'blue'
}

Think of it like:

.AlwaysPut:hover:before{}

And then you can't go wrong! :D

Pseudo Elements vs Pseudo Selectors

These are appropriately called pseudo "elements" (not selectors) because they don't select any "real" element that exists on the page. This goes for these two, as well as the previous sections :first-letter and :first-line. Make sense? Like the first letter that ::first-letter selects isn't an element all to itself, it's just a part of an existing element, hence, pseudo element. ~CSS Tricks

jbutler483
  • 24,074
  • 9
  • 92
  • 145
  • 2
    Thanks but in the question I specify that I already know that's possible. I was wondering why the before cannot listen for a hover event – plondon Jan 17 '15 at 02:42
  • 2
    @plondon: That's because the 'pseudo' element isn't a *true* element of the DOM, and so you can't *'hover'* it. – jbutler483 Jan 17 '15 at 19:19