当用户将鼠标悬停在 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 和z-index 创建一个坐标系来使用。
2. 有几个涉及此类问题的 MSIE 错误，因此请检查您需要支持哪些版本，然后确保它在这些浏览器上正常工作和/或失败。

Answer 2

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