Dear all,
I currently have a problem with the website I am working on. When I hover over a DIV the background color becomes a dark gray and the text becomes white. In Firefox, Opera and Safari (I use a Mac), it works perfectly fine.

However I tried out this morning on a PC with Internet Explorer and Trecent Traveler and I realized that the text in the DIV does change, but the background color does not change at all.

You can see the the page here :
http://115.28.243.139/html/english/index.html

the code is the following:

...

.mainShowcase {
    background-color:#FFFFFF;
    color:#222222;
    z-index:2;
    position:relative;
    width:920px;
    height:200px;
    margin-left:30px;
    margin-right:30px;
    margin-bottom:10px;
    border-bottom-color:#222222;
    border-top-color:#222222;
    border-left-color:#222222;
    border-right-color:#222222;
    border-bottom-style:solid;
    border-top-style:solid;
    border-left-style:solid;
    border-right-style:solid;
    border-bottom-width:thick;
    border-top-width:thick;
    border-left-width:thick;
    border-right-width:thick;
    overflow: hidden;    
}
.mainShowcaseHover:hover {
    background-color:#222222;
    color:#EEEEEE;
    border-bottom-color:#FFFFFF;
    border-top-color:#FFFFFF;
    border-left-color:#FFFFFF;
    border-right-color:#FFFFFF;
    border-bottom-style:solid;
    border-top-style:solid;
    border-left-style:solid;
    border-right-style:solid;
    border-bottom-width:thick;
    border-top-width:thick;
    border-left-width:thick;
    border-right-width:thick;
}

...

Help would be much appreciated. Thank you in advance,

Aurel

IE doesn't support the pseudo class ":hover" on arbitrary elements, only on <a>nchors.

I got white bg.

Originally Posted by chrishirst

IE doesn't support the pseudo class ":hover" on arbitrary elements, only on <a>nchors.

Thank you for the reply.

Is there any way to create an alternative to this - maybe overide the CSS with JS if the browser is IE.

something like that ?

Best

Aurel

whatever:hover