Grow your CSS skills. Land your dream job.

Hover effects not applying in IE8

  • # December 16, 2008 at 4:45 pm

    I’m testing some of my sites in IE8 Beta 2. On one site, I have a horizontal navigation menu with submenus that drop down vertically when you mouseover one of the main menu items. It’s built out of unordered lists.

    Anyway, the menu itself works fine (surprisingly), but there’s one weird bug – when you mouseover a link in the submenu, the link color changes (as it’s supposed to), but the background-color of the link doesn’t. What’s weird is that I have the background-color and the link color defined in the same selector.

    This is the code:

    Code:
    #menu ul li.root:hover ul li a:hover {
    background-color: #efefef;
    color: #00adef;
    }

    No matter what I do, I can’t get the background-color to take effect. I tried using !important and it didn’t make a difference. Even with Compatibility View enabled (which switches to IE7-style rendering), it still doesn’t work, which is odd since it does appear in real IE7 (and IE6, and Firefox, and Safari).

    Any ideas?

    # December 16, 2008 at 7:50 pm

    I’d definitely have to see a test page to see for sure. My theory is that the color is changing because of some other selector elsewhere in the document, and that this selector isn’t being used at all. I suspect it is because the li.root:hover is no longer really being "hovered" when the drop down link is being selected, so this selector never really gets used.

    # December 16, 2008 at 8:07 pm
    Quote:
    I suspect it is because the li.root:hover is no longer really being "hovered" when the drop down link is being selected, so this selector never really gets used.

    That’s exactly what I thought too. It would make sense, because as it turns out, when you mouseover a link in the dropdown menu, the highlight on the root-level link disappears (whereas it stays in other browsers).

    So I tried, for example:

    Code:
    #menu ul li.root ul li a:hover {background-color: #efefef;}
    Code:
    #menu ul li ul li a:hover {background-color: #efefef;}

    Neither one made a difference. I think we’re on the right track though.

    Unfortunately I can’t post a sample page as it’s an internal site. I’ll see if I can make a demo page from scratch and get the same behavior out of it.

    # December 17, 2008 at 1:47 pm

    I actually talked to someone from Microsoft and they said Compatibility View should render things exactly like IE7:

    Quote:
    Compatibility View should render sites as they rendered in IE7. The only exception would be cases where a breaking security change was made, but these are expected to be extremely rare.

    Since the site works in IE7 but not in IE8 with Compatibility View on, this might be an IE8 problem rather than something wrong with my code.

    # December 18, 2008 at 10:50 am
    Quote:
    I suspect it is because the li.root:hover is no longer really being "hovered" when the drop down link is being selected, so this selector never really gets used.

    To follow up on this – if I change the link color in the original selector, like this:

    Code:
    #menu ul li.root:hover ul li a:hover {
    background-color: #efefef;
    color: red;
    }

    The link color DOES change to red, so I know that the selector matches. In that case, I can’t understand why the background-color won’t apply, even if I use !important (unless it’s a legit bug).

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".