如何重新加载css样式表

Question

Probably the answer to my question is simple, but I have not found the answer. I would like to know whether I can call a "className".css file in a mouseover(mouseout) function. For example:

<div id="thing" class="classes" onmouseover="????call the .css file???">My Name</div>

I dont want to write: onmouseover = "style.color:'blue'" ...

Let me explain why I want this. Lets say I have a NAME.css file. This css will make the word "My name" turn into red color.

I have this html ///

<div id="thing" class="classes" onmouseover="this.style.color='blue'">My Name</div><br>

///

I thought that once the mouse is out, the word "My Name" will be red again(this because of the css file), but it is not. Is it possible to write something like this?:

My Name

I dont want to write this:

 <div id="thing" class="classes" onmouseover="this.style.color='blue'" onmouseout = "this.style.color='red'">My Name</div> 

Hope it is clear and understandable. Any help will be appreciated.

Thanks Joel

Answer 1

Use the :hover pseudo class instead in CSS.

.classes:hover {
    color: blue;
}

Answer 2

All you need is a css property in css

div#thing{
    color: red;
}
div#thing:hover{
    color: blue;
}

Answer 3

Yeah it is possible, use the :hover pseudoselector:

#thing { color: red; }
#thing:hover { color: blue; }

JSFiddle Demo