Is there a way to change css on hover with (style="")?

Question

I know you can import a css file that contains, let's say:

div {
    color: black; 
}

div:hover {
    color: red;
}

but is there a way to get the same effect but in the html?

So something with

<div style="color: black;"></div>

I KNOW you can do it with js, but I just wanted to know if there were a hack for it.. And no the "duplicate" question did not contain the answer I was looking for, keep in mind that was 4 years ago.

http://stackoverflow.com/questions/1033156/how-to-write-ahover-in-inline-css — Bernardao, Jul 31 '13 at 08:31
http://stackoverflow.com/questions/131653/how-do-i-embed-an-ahover-rule-into-a-style-attribute-in-the-middle-of-a — Nicklas Ahlskog, Jul 31 '13 at 08:33
There was no answer there... this is 4 years later and it might be able now we have html5 and css3 — Oussama el Bachiri, Jul 31 '13 at 08:33
@OussamaDooby +1 for the thought, but researching a little bit would have helped to not open another duplicate question. — Markus Hofmann, Jul 31 '13 at 08:37
There just might be someone out(here/there) who has a little hack for it... We all know css is FULL of hacks — Oussama el Bachiri, Jul 31 '13 at 09:11

score 3 · Accepted Answer · answered Jul 31 '13 at 08:31

Pseudo classes are not allowed to use as inline CSS, so the short answer is NO, you cannot do what you are trying to achieve.

Consider using <style> tags at document level, or you can use JavaScript if you want to..

<a href="#" onmouseover = "this.style.color = '#000'" 
            onmouseout  = "this.style.color = '#f00'">Hi</a>

Demo

And as you commented, still the answer is no, even using HTML5/CSS3 there's no way you can use pseudo classes inline.

score 2 · Answer 2 · answered Jul 31 '13 at 08:35

2

<div onmouseover="this.style.color='black'">I wouldn't suggest this</div>

answered Jul 31 '13 at 08:35

Levi Govaerts

21
2

score 1 · Answer 3 · answered Jul 31 '13 at 08:34

1

There is no way as far I know. But you can still realize it with js.

<div
   onmouseover="this.style.color='#ff0000'"
   onmouseout="this.style.color='#000000'">
</div>

answered Jul 31 '13 at 08:34

Aldi Unanto

3,626
1
22
30

score 0 · Answer 4 · answered Jul 31 '13 at 08:34

0

Have you tried this?

<div style=":hover {color: red}">Testing inline hover</div>

answered Jul 31 '13 at 08:34

Bernardao

466
6
23

Write on comment please – Aldi Unanto Jul 31 '13 at 08:34
Testing inline hover – Bernardao Jul 31 '13 at 08:35
@AldiUnanto I don't think he has commenting rights – Mr. Alien Jul 31 '13 at 08:35
Don't understand the -1 I was refering to the link provided in the first answer. That possibility appear ins W3C http://www.w3.org/TR/2002/WD-css-style-attr-20020515 It doesn't work on browsers but it's there – Bernardao Jul 31 '13 at 08:42
The same answer I gave was given in the original question and got 7 positive votes. http://stackoverflow.com/questions/1033156/how-to-write-ahover-in-inline-css#comment9295011_1033166 In the questions says he knows it can be done with js, and the solutions given are in javascript... – Bernardao Jul 31 '13 at 09:43

Is there a way to change css on hover with (style="")?

4 Answers4