Comment puis-je changer le z-index d'une div lorsque l'utilisateur passe la souris dessus?

Je suis en train d'essayer de créer des boutons qui sont sous la forme de vaguement empilées les photos polaroid et je voudrais obtenir qui jamais polaroid l'utilisateur passe la souris dessus pour venir vers le haut de la pile.

J'ai essayé de réaliser cela avec un simple:

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

J'ai pensé que cela pourrait, théoriquement, amener le polaroid pour le dessus de la pile, que le courant de la "plus haute" polaroid est z-index:13;

Toutefois, cela ne fonctionne pas du tout, je pense que je suis en train de faire quelque chose de mal et peut exiger un peu de javascript pour atteindre cet objectif.

Mon code actuel est...

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>

J'ai mis tous ces lien vers index.html juste pour tester.

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;

}

Je suis à l'aide de JavaScript ailleurs sur la page et je suis en utilisant ce:

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

Je n'ai pas de connaissances sur la façon d'utiliser le JavaScript, alors je l'ai mis juste au cas où c'est important.

Ai-je fait quelque chose de manifestement erronée ou, cette méthode ne fonctionne pas?

Est-il possible que je peux obtenir ce travers CSS et si non, quel serait le JavaScript pour elle?

  • Est-il une raison pour laquelle vous êtes à l'aide de jQuery v1.3.2? Vous savez que v1.6 est désormais, à droite?
InformationsquelleAutor Flickdraw | 2011-05-05