How do I change the z-index of a div when the user mouses over it?

I'm currently trying to create buttons which are in the form of loosely stacked polaroid pictures and I would like to get which ever polaroid the user mouses over to come to the top of the pile.

I have tried to achieve this with a simple:

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

I thought that this could, theoretically, bring the polaroid to the top of the pile, as the current "highest" polaroid is z-index:13;

However, this doesn't work at all, I think I'm doing something wrong and may require some javascript to achieve this.

开发者_如何学运维

My current code is...

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>

I've set all these to link to index.html just to test.

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;

}

I'm using JavaScript elsewhere on the page and am using this:

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

I have no knowledge of how to use JavaScript, so I put that just incase it is important.

Have I done something obviously wrong or does this method just not work?

Are there any ways I can achieve this through CSS and if not, what would the JavaScript for it be?

---

A couple of thoughts:

1. A containing element (parent, grandparent, etc.) needs to have position: relative in order to create a coordinate system for the position: absolute and z-index to work with.
2. There are several MSIE bugs involving stuff like this, so check what versions you need to support and then make sure it works and/or fails gracefully for those browsers.

---

Remove ' a' where that, for example, '#polaroid_contact a:hover' would look like '#polaroid_contact:hover'.