How To Add Hover Effect On DIV In IE?

By on February 25, 2010 in CSS, How To, Javascript

There are number of glitches that exists in IE. One glitch is that it does not allow hover effect other than on anchor <a> tag.  This small and quick tutorial will show you how to do it with simple JavaScript and CSS.

Step 1: CSS

Define two css classes, one is normal and other one for hover effect

.normal{
  background:#036;
  color:#fff;
  font-size:15px;
  padding:20px;
  border:5px solid #ddd;
}

.divhover{
  background:#eee;
  color:#333;
  font-size:15px;
  padding:20px;
  border:5px solid #333;
}

Step 2: JavaScript

Use javascript events, onmouseover() and onmouseout() and change the class of target div.


    	Hellooo World!! :)

Final Result

Hover your mouse on the div below:

Hellooo World!! :)

Tip

You can use this effect on any of the HTML element (tag) other than DIV and it will work smoothly in IE. ;)

Using jQuery

We can get this hover effect in IE by using jQuery .hover() method. See an example here: http://jsbin.com/inure3/2/

About Prashant

A SQL Expert.
View all posts by Prashant →

, , ,

5 Responses to How To Add Hover Effect On DIV In IE?

  1. gayash February 25, 2010 at 4:55 am #

    Hi,

    I've implemented this and it is working fine in IE. Gr8 Post…… and really nice blog dude…. keep it up Guru of PHP …….. !!!!!

    Thanks
    Gayash

    Reply
    • Sushil Kumar Raghav August 2, 2011 at 5:31 pm #

      Good one thanks :)

      It works in IE :)

      Reply
  2. Shiftdel15589 March 17, 2010 at 4:48 am #

    Hahaha, thanks. It's grrreat.

    Reply
  3. Dinesh July 28, 2010 at 1:01 pm #

    Hi! thanks for the code, its usable :) .

    Reply
  4. Kartik October 23, 2010 at 4:47 pm #

    Hey, thanks a ton dude!!!! i was going bonkers trying to get a hover effect on tables nd divs……;):)

    Reply

Leave a Reply