IE8中无法使用“：hover更改z-index”

Question

I have created a stack of div tags and used z-indexes to make them appear behind each other.

They overlap enough for them all to be visible and mouse-overable. I then assigned a :hover to change the z-index and make the div tag which is being hovered over come to the top of the pile.

An example of what I have would be...

CSS

#red-box {
position:fixed;
width:170px;
height:210px;
margin-left:70px;
top:40px;
background-color:red;
z-index:3;
}

#red-box:hover {
z-index:5;
}


#blue-box{
position:fixed;
width:170px;
height:210px;
margin-left:150px;
top:70px;
background-color:blue;
z-index:2;
}

#blue-box:hover{
z-index:5;
}

HTML

<a id="red-box"></a>
<a id="blue-box"></a>

I have also created a jsFiddle to help highlight what's going on.

This works great in the latest versions of all the browsers but the div tags' z-indexes do not change in IE8.

Could anyone help me fix it?

Answer 1

This ought to fix it: http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/

Basically, just set it to a ridiculously high number.

Edit: I just tested this in my version of IE on your JSFiddle, and it worked.