How do I make :hover inside div style?

Question

So my code looks like this:

<div id="blackbox">style="background: black; 
width: 90px; 
height: 80px; 
color: white; 
text-align: center; 
font-family: Times; 
font-size: 20px;
position: fixed;
left: 0px;
bottom: 150px

Now it somehow doesn't work at the inline CSS, this is the only thing I can get it done. If you got a solution for that, I'd be greatful. But so, I want to make the :hover property but how because this won't work:

<div style="background: black; 
width: 90px; 
height: 80px; 
color: white; 
text-align: center; 
font-family: Times; 
font-size: 20px;
position: fixed;
left: 0px;
bottom: 150px}

blackbox:hover {background: white;}

or

:hover {background: white;}

or

hover {background: white;}

Use external style sheets. You cannot place pseudo-classes inline. — BenM, Aug 27 '13 at 14:04
You cannot use hover in an inline style, you need to use it in a stylesheet. Further, if you've got inline styles in your document, if you want to "override" them with css in an external file, you'll have to use the !important declaration. — random_user_name, Aug 27 '13 at 14:04

score 10 · Accepted Answer · answered Aug 27 '13 at 14:03

10

You can't have pseudo selectors within inline styles.

You'll need to use CSS in an external stylesheet (<link rel="stylesheet" href="style.css" />) or use a <style> element.

answered Aug 27 '13 at 14:03

zzzzBov

174,988
54
320
367

Well now here's the problem, my blackbox div won't read the CSS from elsewhere than inline. Not between – Yesse Engold Aug 27 '13 at 15:44
@CladeeLintunen, if you're setting a style inline, it will have a higher specificity than the styles set from CSS, and will therefore ignore the CSS rules. – zzzzBov Aug 27 '13 at 15:46
How can I fix it? I can't have pseudo code if I can't get it read from seperate file or style element. – Yesse Engold Aug 27 '13 at 15:47
@CladeeLintunen, keep your CSS in `.css` files. – zzzzBov Aug 27 '13 at 15:47
Not helping. Here's my code: SuomiWiki
– Yesse Engold Aug 27 '13 at 15:51
CSS: blackbox { background: black; width: 90px; height: 80px; color: white; text-align: center; font-family: Times; font-size: 20px; position: fixed; left: 0px; bottom: 150px; opacity: 0.5 transition: opacity 5s, background 5s; } blackbox:hover { opacity: 1; background: darkgray; } – Yesse Engold Aug 27 '13 at 15:52
@CladeeLintunen, comments are not the place for code examples. If you need to write up code examples, create a reduced test case in a service such as [jsfiddle](http://jsfiddle.net) – zzzzBov Aug 27 '13 at 16:00
@CladeeLintunen, also, you forgot to prefix your classes with `.`. – zzzzBov Aug 27 '13 at 16:00
Yeah, sorry. Well I got it fixed with # prefix. Is there a difference? – Yesse Engold Aug 27 '13 at 17:46
@CladeeLintunen, the code you posted in this comment thread uses `
`, while the code in your question shows `
`. [there is a significant difference between classes and IDs](http://css-tricks.com/the-difference-between-id-and-class/).
– zzzzBov Aug 27 '13 at 17:48

score 0 · Answer 2 · answered Aug 27 '13 at 14:04

0

Inline pseudo code! Not possible. Try it in embedded or external stylesheet.

answered Aug 27 '13 at 14:04

Praveen

55,303
33
133
164

score 0 · Answer 3 · answered Aug 27 '13 at 14:04

0

in the css write

#blackbox:hover {
    //write something
}

answered Aug 27 '13 at 14:04

Tomzan

2,808
14
25

2

Potentially won't override inline styles.... – random_user_name Aug 27 '13 at 14:05
true, but why does it make any concern? pseudo class couldn't be written in inline styles. – Tomzan Aug 27 '13 at 14:05
Because your answer is incomplete without identifying that, and how to solve it. – random_user_name Aug 27 '13 at 14:06
99% of times you realy shouldn't use !important – Tomzan Aug 27 '13 at 14:07
totally agree, however my point is that this "answer", if taken alone as a potential answer, *will not work* without the !important declaration. – random_user_name Aug 27 '13 at 14:08
I have to disagree, you cannot override this rule in inline style, the only case this class can be over ruled is by higher specificity class.. – Tomzan Aug 27 '13 at 14:09
No, this actually fixed it! The hashtag was all it needed! – Yesse Engold Aug 27 '13 at 15:55

score 0 · Answer 4 · answered Aug 27 '13 at 14:04

0

Pseudo selectors cannot be used inline. :) You have to specify it separately it in css.

answered Aug 27 '13 at 14:04

majorhavoc

2,385
1
24
26

2

Try upvoting the answers already posted, rather than posting a duplicate answer... – BenM Aug 27 '13 at 14:05
1

Late to the party. Time is everything! – random_user_name Aug 27 '13 at 14:05

How do I make :hover inside div style?

4 Answers4