Combining inline css and hover state, is it possible?

Question

I have found out that if we write inline css (or add it using JavaScript), then we lose the value of css hover. Is it possible to change such behavior?

Simple example

---

<div id="test" style="color: red">test</div>
<style>
#test:hover {
    color:blue;
}
</style>

In this case hover doesn't work.

Update

I can't use !important, because after it I will not be able to change that atribute via JavaScript.

Also I generate styles dynamically, so I can't add specific classes via JavaScript.

Answer 1

because inline css overrides your css styles in the file if you had

color: blue !important

it would work but not recommended, you can always use jquery to remove the inline style tag though haha

Update:

remove the style tag using jquery or when using javascript... add !important so the inline css would have important

Answer 2

I can't use !important, because after it i will not be able to change that atribute via javascript.

You can still use !important, just add a class with JavaScript and remove it anytime you want.

demo