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

Question

我目前正在尝试创建松散堆叠的宝丽来照片形式的按钮,我想得到用户将鼠标悬挂在堆顶上的偏光片.

我试图用一个简单的方法实现这个目的:

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

我认为这理论上可以将宝丽来带到堆顶,因为目前"最高"的宝丽来是z指数: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错误涉及这样的东西,所以检查你需要支持哪些版本,然后确保它适用于那些浏览器和/或优雅地失败.