Hover effects not working with IE8

html css internet-explorer-8 hover doctype

34,302

Solution 1

That should work fine in IE8.

A stab in the dark:

Make sure you have a doctype as the very first line of your HTML that triggers Standards Mode, such as:

<!DOCTYPE html>

In Quirks Mode, IE emulates version 5.5, which does not support :hover on elements other than a.

Solution 2

IE8 is not the usual culprit for :hover problems. If you can't get it to work, there's always jQuery!

$("#tabb tbody tr").hover(
    function() {
        $("this").children("td").css( { 'background-color': '#d0e4f2', 'color': '#006' } );
    },
    function() {
        $("this").children("td").css( { ... } );
    }
);

34,302

Author by

Lazer

Updated on March 23, 2020

Comments

Lazer about 4 years
I used CSS for a color change on hover for a table
```
#tabb tbody tr:hover td{
    color:#006;
    background:#d0e4f2;
}
```
This works fine in Chrome and Firefox, but the hover effect does not happen in Internet Explorer 8.

Is there a way to make this effect work with IE8 as well?
Patricia almost 13 years

not a terrible option, but shouldn't be nessisary, and over very large tables, will have some performance issues.
Lazer almost 13 years

I did not have that line. Now it works! Thanks, I will read up about doctype, had no idea.
Wex almost 13 years

If you decide to take the jQuery route, you could also create a .highlight class in your CSS, and then use jQuery's toggleClass() function, rather than hardcoding the CSS attributes into your statement. A better solution if you're willing to add the extra code to your CSS IMO.
Wex almost 13 years

@Patricia - Good point about performance. Too many people rely on javascript in unnecessary situations without thinking about the consequences.
James Drinkard almost 9 years

I had my doctype in my jsp, but then took things out for troubleshooting something else. You nailed it! Thanks for the help!