Simple css :before:hover not working? CSSlint no errors?

Question

http://jsfiddle.net/nicktheandroid/k93ZK/2/

This should be really simple, I just don't understand why it's not working. When hovering over the :before it should change it's opacity to 1, but it doesn't. Why?

p {
    padding-top:15px;
    position:relative;
}

p:before {
    display:block;
    width:55px;
    height:55px;
    content: 'hello';
    background:#fff;
    padding:5px 10px;
    position:absolute;
    right:0;
    opacity:.5;
    -webkit-transition: all 0.3s ease-in-out;

}

p:before:hover {
    opacity:1;
    bakcground:#000;
}

EDIT: I'm using Chrome.

btw. Ie7, IE6 don't suport :before and :after. IE8 support is buggy. — ThatGuy, Jul 30 '11 at 16:06
@nix: You could even add that IE doesn't support `opacity` and `-webkit-transition` is WebKit only... lots of things OP already knows and obviously doesn't care about. — BoltClock, Jul 30 '11 at 16:21
There are many things that may be obvious to some and not to others. This is not necessarily for OP but others who will read this question later. — ThatGuy, Jul 30 '11 at 16:26
Something that *is* worth nothing, though, is that CSS Lint isn't a validator. It's just something that complains about, well, everything. Particularly everything that the spec says is OK/encouraged. — BoltClock, Jul 30 '11 at 16:33
yeah i've heard the complaints about CSS lint, but if IT doesn't throw errors, then i'm pretty sure i'm good... because it complains about everything. — android.nick, Jul 30 '11 at 23:56
im using chrome. what kind of person using stackoverflow really uses ie as their main browser? (answer, people who don't know about chrome). If someone is reading this, and you're using IE, and you've never tried Chrome, I would highly suggest you research browser speed tests and see how they all stack up. Some people love Firefox, some Safari, but from what I've read, Chrome is the fastest. Some might argue that speed at this point between these 3 browsers is minuscule, but i'll take as much speed as I can get. Not to mention it's just a beautiful browser... — android.nick, Jul 31 '11 at 00:20

score 13 · Accepted Answer · answered Jul 30 '11 at 16:05

13

Instead of p:before:hover, you need p:hover:before.

See: http://jsfiddle.net/k93ZK/3/

answered Jul 30 '11 at 16:05

thirtydot

224,678
48
389
349

Beautiful, what if I wanted to add the hover event to the p:before element, so it changes the opacity when I hover the p:before element, not the paragraph itself? – android.nick Jul 31 '11 at 00:23
2

@android.nick: Unfortunately, there's no way to do that with pseudo-elements (such as `:before`). – thirtydot Jul 31 '11 at 00:39
+1 ah, that was the answer that I was looking for, thank you! – android.nick Jul 31 '11 at 03:49

score 0 · Answer 2 · answered Jul 02 '14 at 13:40

0

If you want to let it work in Internet Explorer, just add the following code in your css:

p:hover{}

That's all.

Working example for Internet Explorer (10):

http://jsfiddle.net/k93ZK/63/

answered Jul 02 '14 at 13:40

Mustafa Ekici

138
1
8

Simple css :before:hover not working? CSSlint no errors?

2 Answers2

Linked