Hover Effects Not Working with IE8

Hover effects not working with IE8

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.

IE8 bug - CSS a:hover attribute not working

This issue was due to the position:relative on the .header-nav ul li a tag... I have no idea why IE8 couldn't handle this (and IE7 could!). My fix was to simulate the relative positioning by just making the line-height attribute larger (and adding a *line-height to account for differences in the IE7 rendering).

If anyone has any insight on why this issue was caused I'd love to hear it!

Hope this helps future confused front-end devs that are stuck accounting for older versions of IE...

Hover not working in Internet Explorer

I couldn't be able to find the issue for this. But I found a fix that works with me. Try

.flat{
    position:absolute;
    display:block;
    color:#ffffff;
    text-align:center;
    font-size:30px;
    text-decoration:none;
    z-index:900;
    background-image: url( add url to a transparent pixel.png or a transparent pixel.gif );
}

Working LIVE PREVIEW

New code:

.flat{
    position:absolute;
    display:block;
    color:#ffffff;
    text-align:center;
    font-size:30px;
    text-decoration:none;
    z-index:900;
    background-image: url(../img/flat-bg.png);
}

Having issue with hover:after effect in IE8

I think it is because you have added (and styled) an element between the container and the image (the <span class="overlay">. I think it is messing up the positioning in IE8. I have made a simple jsfiddle demo that works in Chrome and IE8, based on the original example. Sorry I don't have IE9 or above so cannot verify if this will work.

The only problem I had was that :hover overlay element was too wide, so I added a left:0;right:0 to the class. This may not be exactly what you are after but I hope it helps nonetheless :-)

Thumb hover effect not working in IE

Just took a look in IE9 and it is being forced to render in Quirks mode. Really before trying to work out why IE doesn't work correctly, if possible, spend the time fixing the rendering engine (getting it to run in Standards mode). There's a good chance it'll fix itself.

Hover Effects Not Working with IE8