DIV:HOVER IN IE

I have a link element that contains a div element. My requirement is to change the background color of the div element whenever the mouse is hovered over the link. So, initially I tried

div:hover {
background-color: #abcdef;
}

This works fine in Firefox. However, IE doesn’t like the hover pseudo class for anything other than an “a” element. So, after a bit of tinkering, I got it working with

a:hover div {
background-color: #abcdef;
}

This works in both IE and Firefox. One thing though, the DIV element starts changing color whenever the mouse is hovered not just on the DIV itself, but on the A element itself. So, if the DIV happens to be covering the entire A area, then it’s not a problem, but otherwise, depending on the usecase, this may or may not be an acceptable solution. In my specific case, it is an acceptable solution. So, I am done further research on how to get the DIV to change the color when only that element has a mouse hover in IE.

About these ads

12 Comments

Filed under css

12 responses to “DIV:HOVER IN IE

  1. Silja

    Hmm, i understand what you have done, but i still have a problem. I have made menu containing of 4 items, and its made of divs who have gifed animations that should appear when you mouse hover it. This is the part of the CSS that i’v been using for that. Its wery simple:

    The question still stands, how can i make that hover work in IE?

    #fourSwap
    {
    background-image:url(../img/indexPic/animal_logo_a.gif);
    background-repeat:no-repeat;
    background-position:center;
    width: 169px;
    height:79px;
    }
    #fourSwap:hover
    {
    background-image:url(../img/indexPic/animal_logo_b.gif);
    }

  2. S

    If your DIV is not enclosed by a link like my case I mentioned, then you can use javascript and change the css class or a css style property of the element within the onmouseover and onmouseout events.

  3. http://www.GiftPickr.com/ uses this concept as well. Place cursor on the gift guide chart blocks and see the color changing to green. SPAN is used instead of DIV since using DIV in an A element is not valid. End result is the same.

  4. Tinti

    Hi there!

    Without javascript is possible like this

    .cecil
    {
    width:150px;
    height:150px;
    background-color:red;
    }
    .cecil:hover
    {
    background-color:green;
    }

    Ize

    I make now an ASPX site. BUT ITS NOT WORKING!!!!!!!!!!!!!!!!!!!

  5. Lars

    try it like this:

    div#fourSwap:hover { … } or

    div.fourSwap:hover { … }

    and (important(!! ;))): it works only in the strict-modus not in the transitional!!

  6. I can’t seem to get it to work:

    .homebox {
    width: 180px;
    float: left;
    padding: 5px;
    border: 1px solid #FFF;
    }

    .homebox:hover {
    border: 1px solid #999;

    }

    I’m using class instead of id – can i get this to work in IE and Firefox?

  7. Enclosing a div tag within an anchor tag is against the W3C standards. I do not suggest this method.

  8. DO

    (hehe sorry for my bad english i’m not native speaker)

    DOH!! ¬¬ the past comments maybe not works because … a:hover isn’t ?? LOL

    ¬¬ IE is a shit with this and it compels us to write more code!! I remember read an article where the author says IE have much bugs in CSS tratamient (and JavaScript). I think Microsoft don’t want belive lose the war already, and he needs appears with W3C… :) the others explorers Works very good… =/

    Am… the other comments …

    .class:hover {
    background-color: #abcdef;
    }

    works in Firefox, Opera and Safari… but IE again is the black sheep..

    a:hover .class {
    background-color: #abcdef;
    }

    this work in all explorers, hehe don’t question why, but works!

    :P

  9. Thank Eric it works nicely,

    By the way one more thing, while I’m here I should ask you pros about.. I just found out about setting opacity in CSS, now can any one provide me with an example of making a whole div go from 50% opacity to 100% on hover? I’ve been trying but again it stuffs up in IE (I currently have IE 7)

  10. Andrewski

    Div in an anchor? pretty sure you can’t do that, although you may be able to get your desired end result, I don’t think putting block elements inside of inline elements is correct html.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s