[Résolu] Compatibilité entre z-index et zoom lors d'un passage souris

Bonjour à tous,

Mon problème est visible en cliquant ici.
Sept affiches de tailles décroissantes sont visibles avec ombre portées. Lorsqu'on passe la souris sur une affiche, elle est agrandie. MAIS l'image reste en-dessous des images voisines. Les images de gauche à droite sont en z-index décroissants pour que les ombres soient bien portées sur l'affiche suivante (réalisé par java script :

<script type="text/javascript" charset="utf-8">
var pourc=25
var mrg=0
var mmarg=mrg+"px"
var larg=pourc+"%"
function diml() {
	 pourc = pourc *4 /5
	 mrg = 90-4*pourc
	 mmarg=mrg+"px"
	 larg=pourc+"%"
	return larg 
}
var boxes = document.getElementsByClassName('affich_previous')
var nb = boxes.length; var i=nb
do  {
boxes[nb-i].style.width = larg;
boxes[nb-i].style.marginTop = mmarg;
boxes[nb-i].style.zIndex = i
diml()
    } while(--i)
</script>

Voici le code HTML pour une image :

<div class="affich_previous">
<a href="galerie/saison1314/14.01.19-Opera/index.html"><img class="zoom" src="affich/Affiche_HM_jan14.gif" width="100%" title="19 janvier 2014 : Airs d'Op&eacute;ra" alt="19 janvier 2014 : Airs d'Op&eacute;ra" /></a>			</div>

Et voici les classes CSS "affich_previous" et "zoom" :

.affich_previous
{
position: relative;
box-shadow: 9px 9px 9px #888888;
float:left;  
width: 25%;
}

.zoom
{
background:  #FEFAD9;
position: relative;
width: 100%; 
}    
.zoom:hover
{
background:  #FEFAD9;
float:right;
position: relative;
z-index : 10;
margin-top: 0px;
width: 320px; 
}    

Apparemment il semble que le z-index de "zoom:hover" n'arrive pas à remplacer ceux définis par le JS. Ou bien il y a une erreur que je ne vois pas...
L'un de vous a-t-il une idée ?

JiPaul.
Modifié par JiPaul (08 Nov 2014 - 14:34)

kustolovic a écrit :

Oui les styles en ligne (ce que fait javascript) sont plus forts que ceux de la feuille de style, pour passer par-dessus, il faudrait écrire: z-index: 10!important;

Merci de ta réponse. Mais je viens d'essayer et ça ne change rien...

kustolovic a écrit :

Sinon le plus simple et le plus propre serait de ne pas donner de z-index en javascript.

Certes. Mais comment faire alors pour que les images de gauche soient "par dessus" celles de droite afin que les ombres portées soient comme je le souhaite (c'est-à-dire comme c'est actuellement)?

JiPaul.
Modifié par JiPaul (08 Nov 2014 - 17:05)

Oups en effet l'autre problème est que tu essaies de donner un z-index à un élément enfant. Vu que tu crées un contexte d'empilement sur .affich_previous de 6, ses enfants ne pourront pas passer à 10…

La solution est alors de déclarer le z-index sur le bon élément:

.affich_previous:hover {
  z-index: 10!important;
}

Trouvé ! Dommage que la case "résolu" n'apparaisse que dans une réponse et que si on s'est identifié AVANT de ckiquer sur "Répondre" !...