CODEWITHSUNDEEP
javascripthtmlcss
Joel
Joel

Reputation: 336

How to reload the css stylesheet

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

Upvotes: 2

Views: 120

Answers (3)

techfoobar
techfoobar

Reputation: 66693

Use the :hover pseudo class instead in CSS.

.classes:hover {
    color: blue;
}

Upvotes: 6

DarkAjax
DarkAjax

Reputation: 16223

Yeah it is possible, use the :hover pseudoselector:

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

JSFiddle Demo

Upvotes: 2

karthikr
karthikr

Reputation: 99680

All you need is a css property in css

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

Upvotes: 2

Related Questions