当用户将鼠标悬停在 div 上时，如何更改其 z-index？

Question

我目前正在尝试创建松散堆叠的宝丽来照片形式的按钮，我想获取用户将鼠标悬停在哪一张宝丽来照片上以到达堆的顶部。

我试图通过一个简单的方法来实现这一点：

#polaroid a hover{
z-index:15;
}

我认为从理论上讲，这可以将宝丽来照片放在堆的顶部，因为当前“最高”宝丽来照片的 z-index:13；

然而，这根本不起作用，我认为我做错了什么，可能需要一些 javascript 来实现这一点。

我当前的代码是...

HTML

<a id="polaroid_home" href="index.html"></a>
<a id="polaroid_about" href="index.html"></a>
<a id="polaroid_portfolio" href="index.html"></a>
<a id="polaroid_contact" href="index.html"></a>

我已将所有这些设置为链接到index.html 只是为了测试。

CSS

#polaroid_home{
position:absolute;
width:175px;
height:215px;
left:670px;
top:140px;
background-image:url(../Images/polaroid-home.png);
background-repeat:no-repeat;
z-index:13;
}


#polaroid_home a:hover{
z-index:15;

}

#polaroid_about{
position:absolute;
width:175px;
height:215px;
left:765px;
top:175px;
background-image:url(../Images/polaroid-about.png);
background-repeat:no-repeat;
z-index:12;
}

#polaroid_about a:hover{
z-index:15;

}

#polaroid_portfolio{
position:absolute;
width:175px;
height:215px;
left:620px;
top:255px;
background-image:url(../Images/polaroid-portfolio.png);
background-repeat:no-repeat;
z-index:10;
}

#polaroid_portfolio a:hover{
z-index:15;

}

#polaroid_contact{
position:absolute;
width:210px;
height:235px;
left:740px;
top:310px;
background-image:url(../Images/polaroid-contact.png);
background-repeat:no-repeat;
z-index:11;
}

#polaroid_contact a:hover{
z-index:15;

}

我在页面的其他地方使用 JavaScript 并且正在使用这个：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>

我不知道如何使用 JavaScript，所以我把它放在以防万一它很重要。

我是否做了一些明显错误的事情或者这个方法不起作用？

有什么方法可以通过 CSS 实现这一点吗？如果没有，那么 JavaScript 会是什么？

Answer 1

一些想法：

1. 包含元素（父元素、祖元素等）需要具有 position:relative 才能为 position:absolute 和 创建坐标系code>z-index 来使用。
2. 有几个 MSIE 错误涉及此类内容，因此请检查您需要支持哪些版本，然后确保它对于这些浏览器正常工作和/或失败。

Answer 2

删除 ' a'，例如，'#poloid_contact a:hover' 看起来像 '#poloid_contact:hover'。