bonjour j'ai un problème avec une animation, j'aimerai que l'animation du rectangle noir soit au dessus de celle du rectangle rouge.

Pourtant comme vous pouvez le voir ici :

https://jsfiddle.net/e843e0v3/3/

l'animation du rectangle noir a un z-index 12 et celle du rectangle rouge un z index 0 je ne comprends vraiment pas.

Merci de votre attention

salut

z-index ne marche pas entre un élément et son parent. ça marchera si tu met:

<div class="casex"></div>
<div class="test"> </div>

ou sinon, tu les inverse, tu n'auras pas besoin de mettre z-index.

mais le rendu n'est pas fameux, je ne sais pas ce que tu cherche à faire.

ceci dit, dans le css, dans le hover tu n'as pas besoin de remettre toues les régles, tu met juste celles qui changent

.test{
  position: fixed;
  background:red;
  z-index: 0;
  top:30%;
  left:12%;
  height: 180px;
  width:100px;
   transition-duration: 0.5s;
}

.test:hover{
  top:29%;
  left:10%;
  height: 200px;
  width:200px;
}

salut,

rectangle rouge enfant du rectangle noir tout bonnement.

par contre vue que tu as mis les deux en position fixed tu peux les séparer comme ceci :

      <div class="casex"></div>
      <div class="test"> </div>

Puis mettre sur ta div casex un background-color: transparent; au lieu de blanc pour continuer à voir ta div test.

PS: z-index: 12; est inutile, 1 suffit amplement.

Ok merci youne25 pour le hover je ne savais pas.

Effectivement on pourrait les inverser mais le rendu n'est pas fameux

Mais sinon j'aimerai que les animations se fassent en même temps peu importe sur quel rectangle on passe la souris.

En fait si on les inverse et que je passe la souris sur le rectangle rouge par exemple, il n'y a pas l'animation du rectangle noir en même temps.

C'est pour ça que j'ai essayé de les mettre en parent/enfant pour que ça se fasse en même temps mais le noir est au dessus du rouge.

J'espère que vous m'avez compris bonne journée

-
Edité par AmirMoumen 20 décembre 2018 à 15:01:27

tu as aussi ça alors en CSS

.casex:hover ~.test {
     //Action sur .test lorsque hover sur .casex
}

~ on appel ça ascendant tu as tout une liste de possibilité que je te laisserais chercher avec les noms Sélecteur, pseudo-class et Combinateur

Merci de ton aide Guillaume, alors j'ai simplifié le code en nommant les rectangles :

https://jsfiddle.net/e843e0v3/17/

J'ai mis le code que tu m'as envoyé mais il n'a pas l'air de fonctionner car j'ai mis que une fois la souris passée sur le rectangle noir, le rectangle rouge doit devenir noir avec l'aide de l'ascendant mais ça ne fonctionne pas.

Merci de ton attention 

up plz

Bonjour,

Voici les erreurs que j'ai pu relever rapidement :

• ligne 35 une accolade de trop
• ligne 19 pourquoi 12 ???? 1 suffit. imagine 10 cubes tu mets 40 pour le troisième et 500000 pour le dixième ??? un peux complexe de savoir ou tu en es 
• ton erreur se trouve entre la ligne 27 et 33.

Décortiquons ton erreur ensemble:

1) que vois tu lors du hover du .casex ?

• Ta div .test apparait et disparait à l'infini.

2) Pourquoi ?

.test {
	position: fixed;
	background: red;
	z-index: 0;
	top: 30%;
	left: 12%;
	height: 180px;
	width: 100px;
}

.test:hover {
	position: fixed;
	background: red;
	z-index: 0;
	top: 29%;
	left: 10%;
	height: 200px;
	width: 200px;
	transition-duration: 0.5s;
}

.casex {
	position: fixed;
	background-color: white;
	z-index: 1;
	top: 10%;
	left: 13%;
	height: 300px;
	width: 100px;
}

.casex:hover ~.test {
	position: fixed;
	background-color: black;
	z-index: 1;
	top: 15%;
	left: 13%;
	height: 500px;
	width: 200px;
}

Voici ton code avec les modifs décrites au dessus.

Sur le résultat lors de l'essai tu as pu remarquer que le css .test et .casex faisait bien leur taf on peux donc les exclure.

.test:hover {
	position: fixed;
	background: red;
	z-index: 0;
	top: 29%;
	left: 10%;
	height: 200px;
	width: 200px;
	transition-duration: 0.5s;
}

.casex:hover ~.test {
	position: fixed;
	background-color: black;
	z-index: 1;
	top: 15%;
	left: 13%;
	height: 500px;
	width: 200px;
}

voici donc la seconde étape. lors du survole de .casex la div .text apparait bien en noir tout correctement mais disparait vite fait au bout de 0.5s, la durée de ta transition. tu sais donc que le problème ne peux venir que du dernier : .casex:hover ~ .test ...

Maintenant cherchons quel est la ligne problématique:

Voila déjà une grosse erreur de ta part: Le copier coller.

Est il nécessaire de rappeler à chaque fois position fixed ainsi que son background par exemple ? si la donnée ne change pas ne la rappel pas.

.casex:hover ~ .test {
	background-color: black;
	z-index: 1;
	top:15%;
	height:500px;
	width: 200px;
}

maintenant que l'on garde que les données qui changent, nous pouvons voir que top , left height et width ne peux impacter notre visuel de cette façon il nous reste donc z-index.

Alors pourquoi nous embête t'il ?
tout bonnement parce que .test au début est en z-index: 0; puis lors du hover de .casex, .test devient z-index: 1; Mais vu qu'il est maintenant devant .test prend le hover et lorsqu'il a le hover il repasse derriere... Donc boucle indéfiniment.

.test {
	position: fixed;
	background:red;
	z-index: 0;
	top:30%;
	left:12%;
	height: 180px;
	width:100px;
}
.test:hover {
	top:29%;
	left:10%;
	height: 200px;
	width:200px;
	transition-duration: 0.5s;
}
.casex {
	position: fixed;
	background-color: white;
	z-index: 1;
	top:10%;
	left: 13%;
	height:300px;
	width: 100px;
}
.casex:hover ~ .test {
	background-color: black;
	top:15%;
	left: 13%;
	height:500px;
	width: 200px;
}

Voila, si tu as un point que tu n'as pas bien compris dit le moi.

-
Edité par GuillaumeBo1 27 décembre 2018 à 1:35:16

Non tout est très bien merci beaucoup de ton aide !

-
Edité par AmirMoumen 10 janvier 2019 à 23:01:56