Rollover effects using onmouseover and onmouseout events in html

I’ll show how to create Rollover effects using onmouseover and onmouseout event in html.

first create two CSS class

div.HoverON {

border:1px solid #FF2222;
}
div.HoverOFF {

border:1px solid white;
}

Now we use follow code to change HoverOFF to HoverON on onmouseover event and HoverON to HoverOFF on onmouseout event.

<div class="HoverOFF" onmouseover="this.className='HoverON'" onmouseout="this.className='HoverOFF'">
     Ashish's Blog
 </div>

Demo:

DEMO

Ashish's Blog