“：悬停以更改 z 索引”无法在 IE8 中工作
我创建了一堆 div 标签并使用 z 索引使它们出现在彼此后面。
它们重叠得足以使它们全部可见并且可以将鼠标悬停在上面。然后我分配了一个 :hover 来更改 z-index 并使悬停在上面的 div 标签位于堆的顶部。
我所拥有的一个例子是...
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>
我还创建了一个 jsFiddle 来帮助突出显示正在发生的事情在。
这在所有浏览器的最新版本中都非常有效，但 div 标签的 z 索引在 IE8 中不会改变。
有人能帮我解决它吗？
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?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
这应该可以解决它：
http://brenelz.com/blog/squish-the- internet-explorer-z-index-bug/
基本上，只需将其设置为一个高得离谱的数字即可。
编辑：我刚刚在 JSFiddle 上的 IE 版本中测试了这一点，并且它有效。
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.