Display: none sur div enfant

Version imprimable

Bonjour,

J'ai une animation 3D flip sur des elements div.
Chaque élément contient des conteneurs div enfants : un conteneur front et un conteneur back.
Je souhaite via du javascript afficher et masquer le conteneur back avec une fonction Hover.

J'ai quelques difficultés à réaliser ce que je souhaite...

Voici la structure html de mon conteneur élément :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="element hover blog" id="_13" >
 
    <div class="front shadow">
        <div class="element-image-front">
        <img src="./Post thumbnail images/formlabs.jpg"/>
        </div>
    </div>
 
    <div class="back">
        <div class="element-image-back">
        <img src="./Post thumbnail images/xxx.jpg"></div>
        <div class="category-element"></div>
        <div class="description-element"></div>
    </div>
 
</div>

Le conteneur div .back a pour css display:none; .

Voici mon code js qui marche à moitié:

Code:

1
2
3
4
5
6
7
8
9
10
11
$(document).ready(function(){
$(".hover").mouseover(function(){
    $(this).addClass('flip');
    $('.element-image-back img').css('display', 'block');
    $('.back').css('display', 'block');
 }).mouseout(function(){
    $(this).removeClass('flip');
    $('.element-image-back img').css('display', 'none');
    $('.back').css('display', 'none');
});
});

Il "permet" d'afficher l'animation flip, d'afficher et masquer le conteneur .back. Cependant il ne marche pas correctement.

Je crois que j'ai du mal a afficher et cacher le div .back de l'élément sélectionné avec le Hover...

Voici mon CSS :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
.element {
	cursor: pointer;
	width: 250px;
	height: 180px;
	margin: 3px;
	float: left;
  	overflow: visible;
  	position: relative;
}.element-image-front img{
	position:absolute;
	z-index: 3;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	margin: 0;
	padding: 0;
	outline: 1px solid rgba(0,0,0,0.1);
	overflow:hidden;
}
.element-image-back img{
	position: absolute;
	display: none;
	z-index: 4;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	margin: 0;
	padding: 0;
	opacity: 0.035;
	-moz-transform: scaleX(-1);
	-o-transform: scaleX(-1);
	-webkit-transform: scaleX(-1);
	transform: scaleX(-1);
}
.element .front {
	position: absolute;
	overflow: hidden;
	z-index: 900;
	width: 100%;
	height: 100%;	
	top: 0;
	left: 0;
	margin: 0;
	padding: 0;
	background: #333;
	text-align: center;
	-webkit-transform: rotateX(0deg) rotateY(0deg);
	-webkit-transform-style: preserve-3d;
	-webkit-backface-visibility: hidden;
	-moz-transform: rotateX(0deg) rotateY(0deg);
	-moz-transform-style: preserve-3d;
	-moz-backface-visibility: hidden;
	-o-transition: all .5s ease-in-out;
	-ms-transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
	-webkit-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;
}
.element.flip .front {
	position: absolute;
	z-index: 900;
	width: 100%;
	height: 100%;
	background: #333;
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
}
.element .back {
	position: absolute;
	display: none;
	overflow: hidden;
	z-index: 800;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	margin: 0;
	padding: 0;
	background: #434343;		
	-webkit-transform: rotateY(-180deg);
	-webkit-transform-style: preserve-3d;
	-webkit-backface-visibility: hidden;
	-moz-transform: rotateY(-180deg);
	-moz-transform-style: preserve-3d;
	-moz-backface-visibility: hidden;
	-o-transition: all .5s ease-in-out;
	-ms-transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
	-webkit-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;
}
.element.flip .back {
	position: absolute;
	z-index: 1000;
	width: 100%;
	height: 100%;
	background: #434343; /***#191919***/
	-webkit-transform: rotateX(0deg) rotateY(0deg);
	-moz-transform: rotateX(0deg) rotateY(0deg);
	-webkit-box-shadow: inset 0px 0px 12px rgba(0,0,0,0.4), 0px 0px 8px rgba(0,0,0,0.7);
	-moz-box-shadow: inset 0px 0px 12px rgba(0,0,0,0.4), 0px 0px 8px rgba(0,0,0,0.7);
	box-shadow: inset 0px 0px 12px rgba(0,0,0,0.4), 0px 0px 8px rgba(0,0,0,0.7);
}
.click .front {
	cursor: pointer;
	-webkit-transform: rotateX(0deg);
	-moz-transform: rotateX(0deg);
}
.click.flip .front {
	-webkit-transform: rotateX(180deg);
	-moz-transform: rotateX(180deg);
}
.click .back {
	cursor: pointer;
	-webkit-transform: rotateX(-180deg);
	-moz-transform: rotateX(-180deg);
}
.click.flip .back {
	-webkit-transform: rotateX(0deg);
	-moz-transform: rotateX(0deg);
}

En espérant que quelqu'un puisse m'aider.

Merci d'avance!

24/03/2013, 11h34
dragonno
Citation:

Je souhaite via du javascript afficher et masquer le conteneur back...

Ton contener Back il faut que tu lui donnes une "id" si tu veux le cacher ensuite avec :
Code:

1 2 3 4 5 function cacher() { document.getElementById("id de back").display="none"; }
Bien sûr met l'id du back dedans.

Bonjour,
cela se réalise en pur CSS simplement

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>[CSS :hover]</title>
<meta name="Author" content="NoSmoking">
<style>
#_13 .back{
  display:none;
}
#_13:hover .back{
  display:block;
}
#_13:hover .front{
  display:none;
}
</style>
</head>
<body>
<div class="element hover blog" id="_13" >
    <div class="front shadow">
        <div class="element-image-front">
        <img src="http://web.developpez.com/faq/theme/images/mini_logo_faq_css.gif"/>
        </div>
    </div>
    <div class="back">
        <div class="element-image-back">
        <img src="http://web.developpez.com/faq/theme/images/mini_logo_faq_js.gif"></div>
        <div class="category-element"></div>
        <div class="description-element"></div>
    </div>
</div>
</body>
</html>

Merci pour vos réponses.

Cependant aucune ne me résout le problème.

Alors, dans un premier temps, le conteneur back a une class="back" car on le retrouve des 10ènes de fois dans des 10ènes de conteneurs élément . En fait ces conteneur élément sont des thumbnails qui flip avec un Hover.

L'id _13 est celui d'un span permettant un référencement par search box. Le nombre est incrémenté de 1 sur chaque élément. Cet id n'est donc pas unique pour référencer mes éléments.
J'ai quand même essayé avec quelques id mes cela ne change rien.

Ce code marche quasiment :
Code:

1 2 3 4 5 6 7 8 9 $('.hover').hover(function(){ $(this).addClass('flip'); $('.element-image-back img').css('display', 'block'); $('.back').css('display', 'block'); },function(){ $(this).removeClass('flip'); $('.element').$('.element-image-back img').css('display', 'none'); $('.element').$('.back').css('display', 'none'); });
Il affiche bien le conteneur back avec le Hover, mais il affiche tout les conteneur back...
Dans ce cas comment mettre tous les conteneur back en display none ?

Avec ce code : il affiche bien le bac et le cache bien !
Code:

1 2 3 4 5 6 7 8 9 $('.hover').hover(function(){ $(this).addClass('flip'); $('.element-image-back img').css('display', 'block'); $('.back').css('display', 'block'); },function(){ $(this).removeClass('flip'); $('.element-image-back img').css('display', 'none'); $('.back').css('display', 'none'); });
Seulement, l'animation bug...
Je pense savoir d'ou vient le problème. Il vient d'un problème de référencement de l'élémént a afficher masque.
Ce sont les termes $(this) next() prev() parent() child() que je ne sais pas comment utiliser dans mon cas...

dans ce cas passe par les class

Code:

1
2
3
4
5
6
7
8
9
.hover .back{
  display:none;
}
.hover:hover .back{
  display:block;
}
.hover:hover .front{
  display:none;
}

24/03/2013, 13h39
lolo34140
Effectivement comme ça ça marche bien pour masquer et cacher le back et l'image back :
Code:

1 2 3 4 5 6 7 8 9 .hover .back{ display:none; } .hover:hover .back{ display:block; } .hover:hover .element-image-back img{ display:block; }
Par contre cela cause un léger bug d'animation sur le flip mais ça résout bien le problème initial.

Maintenant quand je mets la souris sur un élément, j'ai l'élément qui flip bien et affiche correctement le back avac l'image.

Par contre quand j'enlève la souris, le back et l'image disparaissent avant que l'animation flip soit faite. Du coup le flip s’effectue mais sans qu'on le voit...

C'est pour ça que je pense qu'il me faut du javascript.

Il faut que je fasse la même chose mais en javascript à mon avis. Ou ajouter un délais quand le back disparait...

Example du bug ici : http://fiddle.jshell.net/9B5mS/
24/03/2013, 15h11
dragonno

Dans le forum contribution de javascript, j'ai mis un code javascript pour changer la classe de tous les éléments qui ont la même.
Et je crois même que quelqu'un a donné une solution en JQuery.
24/03/2013, 15h22
lolo34140

Merci pour l'aide.
Mais je ne sais pas si cela va permettre de résoudre mon problème. En tout cas je ne vois pas comment...

Par contre avec le css si j'arrive à mettre un delai ou une transition sur le display: none ça résoudrait mon problème en théorie. Or je crois que c'est pas possible sur un display les transitions...
24/03/2013, 15h37
dragonno

Tiens j'ai trouvé le lien :

http://www.developpez.net/forums/d13...se-javascript/
24/03/2013, 16h16
lolo34140

Par d'après ce que j'ai compris ce n'est pas compatible IE?

Car le but de tout ce que je fait c'est d'améliorer la fluidité sous IE... (même sir je n'utilise pas IE)

Bon avec ce code et .back display:none j'arrive presque au résultat souhaité:
Code:

1 2 3 4 5 6 7 8 9 $('.hover').hover(function(){ setTimeout(function(){ $('.back').css('display', 'block')}, 500); $(this).addClass('flip'); },function(){ $(this).removeClass('flip'); setTimeout(function(){ $('.back').css('display', 'none')}, 500); });
J'ai encore quelque petit bug d affichage mais c est un peu mieux...

24/03/2013, 17h30
aku84

Salut, je sais pas si ça peut t'aider mais tu peux accéder aux enfants d'un élément avec childNodes[i]:

par exemple:

Code:

document.getElementById("_13").childNodes[0].style.display="none";

masquera le premier enfant ("front shadow")

Code:

document.getElementById("_13").childNodes[1].style.display="none";

masquera le deuxième ("back")

Ca permet aussi de virer des ID inutiles
24/03/2013, 17h43
lolo34140

Merci.

Seulement je ne peux pas récupérer d’élément par id car ce sont des classes. J'ai une 30aine d’éléments .element .back . front ...

Imaginons que je mette un id fixe (mais si ce n'est pas conseillé pour plusieurs éléments) j'aurais toujours le même problème d'affichage...

EDIT: voici le fiddle mis a jour : http://fiddle.jshell.net/9B5mS/1/
Il marche presque correctement mais il y a encore quelques problème d'affichage.
Cela est certainement du au setTimeout pour l'ajout de la classe flip...
24/03/2013, 17h51
aku84
Mais justement tu n'as pas besoin d'ID fixe avec cette méthode:

Si tu as l'ID de l'élément parent ça suffit. D'après ce que je comprend tu doit avoir des div parent dont l'ID est "_1" , "_2" , "_3" ... "_n" ect ??

Donc en faisant:
Code:

1 2 3 for (var i=0;i<n;i++) { document.getElementById("_"+i).childNodes[1].style.display="none"; }
ça masquera tous les deuxième enfants de toutes les DIV (qui ont la classe "back")

non ?
24/03/2013, 18h04
lolo34140

Merci pour l'aide.

Cependant ça ne marche pas ou du moins je ne sais pas faire fonctionner ce code...

voici le fiddle avec le code : http://fiddle.jshell.net/9B5mS/2/
24/03/2013, 18h17
aku84

J'ai regardé le fiddle, déjà il y avais un problème au niveau de l'iD des div parent qui étaient toutes les meme donc j'ai mis "_1", "_2", "_3" ect

Ensuite si tu laisse n dans

Code:

for (var i=0;i<n;i++)

Ca va pas marcher car n n'est pas défini.

Dans ce cas il y a 8 div parent donc on met n=8

Par contre je connais pas la syntaxe pour les "add Class", ça ne marche pas car je pense que la classe n'est pas ajoutée correctement ?

Voila ce que j'ai changé:http://fiddle.jshell.net/9B5mS/3/
24/03/2013, 18h40
aku84

En fait il se trouve que le childNodes correspondant au div dont la classe est "back" n'est pas 1 mais 5 (dautres doivent etre prisent en compte surement)

donc ca marche (en tout cas ça en a l'air) en mettant childNodes[5]

voici le fiddle:

http://fiddle.jshell.net/9B5mS/4/

Merci!

Par contre la vrai structure de mon .element est celle-ci:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <div class="element hover blog" id="_13" > <span class="name" style="display:none;">3D printing formlabs printer kickstarter</span> <div class="front shadow"> <div class="element-image-front"><div class="overlay"></div> <img src="./Post thumbnail images/formlabs.jpg"/> </div></div> <div class="back"> <a class="link" href="/portfolio/dock.html" onclick="gestionClic('compteur13');"><div class="element-image-back"> <img src="./Post thumbnail images/formlabs.jpg"></div> <div class="category-element"><i class="icon-pencil"></i>  Formlabs<div id="separator2"></div></div> <div class="description-element">An affordable 3D printer available on kickstarter.com</div> <div class="viewnumber-container"> <div class="views"> views</div><div id="compteur13" class="compteur"></div></div> </a> </div> </div>
Du coup je n'arrive plus a configurer le childnodes au niveau du nombre. Ca marche plus.

Sinon pourquoi pas plutôt récupérer juste l'id de l'élément sur lequel on fait un Hover. Car mon nombre id"_+i" va varier au cours du temps. De plus cela éviterai d'afficher plein d'images en même temps.

Une solution en CSS3

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>CSS3 Flip sur :hover</title>
<meta name="Author" content="NoSmoking">
<style>
body{
  margin:0;
  paddin:0;
}
#page{
  width:40em;
  margin: 2em auto;
}
.flip_conteneur {
  width:270px;
  margin:1em auto;
  padding:1em;
  border:5px solid #CCF;
  background:#EEF;
}
.flip {
  position: relative;
  width: 270px;
  height: 180px;
  -webkit-transform-style: preserve-3d;
     -moz-transform-style: preserve-3d;
       -o-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-perspective: 1000px;
     -moz-perspective: 1000px;
       -o-perspective: 1000px;
          perspective: 1000px;
}
.back, .front {
  position: absolute;
  -webkit-backface-visibility: hidden;
     -moz-backface-visibility: hidden;
       -o-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transition: -webkit-transform 1s ease-in;
     -moz-transition:    -moz-transform 1s ease-in;
       -o-transition:      -o-transform 1s ease-in;
          transition:         transform 1s ease-in;
}
.back {
  -webkit-transform: rotateY( 180deg);
     -moz-transform: rotateY( 180deg);
       -o-transform: rotateY( 180deg);
          transform: rotateY( 180deg);
}
.flip_conteneur:hover .back {
  -webkit-transform: rotateY( 0deg);
     -moz-transform: rotateY( 0deg);
       -o-transform: rotateY( 0deg);
          transform: rotateY( 0deg);
}
.flip_conteneur:hover .front {
  -webkit-transform: rotateY( -180deg);
     -moz-transform: rotateY( -180deg);
       -o-transform: rotateY( -180deg);
          transform: rotateY( -180deg);
}
</style>
<script>
</script>
</head>
<body>
<div id="page">
  <h1>CSS3 Flip sur :hover</h1>
  <div class="flip_conteneur">
    <div class="flip">
      <div class="back"><img src="http://club.developpez.com/webdesign/Rubriques/Web/logo_tous_les_outils_Web.gif"></div>
      <div class="front"><img src="http://club.developpez.com/webdesign/Rubriques/Web/logo_toutes_les_faq_Web.gif"></div>
    </div>
  </div>
  <div class="flip_conteneur">
    <div class="flip">
      <div class="back"><img src="http://club.developpez.com/webdesign/Rubriques/Web/logo_tous_les_livres_Web.gif"></div>
      <div class="front"><img src="http://club.developpez.com/webdesign/Rubriques/Web/logo_tous_les_cours_Web.gif"></div>
    </div>
  </div>
</div>
</body>
</html>

attention toutefois à la compatibilité suivant ce que tu souhaites faire.

24/03/2013, 19h06
lolo34140

Merci pour cette solution.

Voici le fiddle correspondant : http://fiddle.jshell.net/9B5mS/5/

Cependant est ce que avec cette solution, le back est en display none si il n'y a pas d'hover.

Car je cherche à le rendre en display: none pour améliorer la fluidité de mon site. Si le back n'est pas en display none alors ca ralentit tout mon site...
24/03/2013, 19h07
aku84
Pour connaitre le numéro du childNodes j'ai fait ça:

Pour la div d'id "_13":
Code:

1 2 3 4 5 6 7 var i=0; while (document.getElementById("_13").childNodes[i]) { if (document.getElementById("_13").childNodes[i].className=="back") { alert(i) } i++; }
Par contre récupérer juste l'id je sais pas trop car je connais pas trop les classes multiples et pas du tout jquery...

j'ai essayé de remplacer la boucle dans la fonction par:

Code:

this.childNodes[5].style.display="block";

mais je pense pas que ce soit la solution...
24/03/2013, 19h32
NoSmoking

Citation:

Envoyé par lolo34140

Cependant est ce que avec cette solution, le back est en display none si il n'y a pas d'hover.

Car je cherche à le rendre en display: none pour améliorer la fluidité de mon site. Si le back n'est pas en display none alors ca ralentit tout mon site...

je doute que cela soit ce qui ralenti ton site!

Si tu mets le dos en display:none au départ et sur le mouseover en display:block, l'animation n'aura plus de sens sur le mouseout, d'autant que pour préparer la transformation le navigateur à besoin de valeurs et par définition un display:none fait que l'élément vaut ne rien.
24/03/2013, 19h36
lolo34140

Malheureusement, c'est bien l'image du .back qui ralentit mon site.
Ça ralenti les animations du plugin jquery isotope. Cela j'en suis sur.

Je suis entrain de regarder pour un plugin flip pour résoudre mon problème

J'en ai trouvé un (https://github.com/lepixel/flippy).

Mais j'ai encore du mal à le faire fonctionner : http://fiddle.jshell.net/52mG7/3/

Celui ci permet bien de masquer le .back et le .front par contre. EN plus il marche avec IE.
24/03/2013, 19h53
NoSmoking

si tu passes en fullJS il te faut commencer par virer toutes les propriétés CSS3 de ton code afin de ne pas avoir d'interférence. Repars donc d'un code CSS plus light.
24/03/2013, 19h57
lolo34140

Oui c'est bien ce que j'ai fait dans mon fiddle. Il n'y a plus de flip et de transitions...
25/03/2013, 00h51
dragonno

Citation:

Sinon pourquoi pas plutôt récupérer juste l'id de l'élément sur lequel on fait un Hover.

Bonne idée ça !

Pour rappel juste :
Tu récupères juste avec this.id dans le hover.
25/03/2013, 01h22
lolo34140

J'ai essayé mais je n'arrive pas à manipuler this.id ...
25/03/2013, 01h47
lolo34140
J'arrete pas d'essayer des choses et je suis persuadé que la solution est très simple.

Il ne s'agit que d'un problème de référencement des éléments lors de l'animation.

Par exemple avec ce code :
Code:

1 2 3 4 5 6 7 $('.hover').hover(function(){; $('.back').show(0); $(this).addClass('flip'); },function(){ $(this).removeClass('flip'); $('.back').hide(500); });
Tout devient très fluide. Le back devient display:block puis display:none.
Il y a bien le flip.

Seulement si je passe d'une vignette à une autre il y a un problème d'affichage. Le back disparait sur l'élément suivant (ça clignote (display:none;display:block;). Plus je survole d'élément plus ça "clignote".

Je pense que la solution existe en peu de lignes...
25/03/2013, 02h09
dragonno

Le "id" tu l'envoie en paramètre de la fonction lancée par le over.

Je te le place là mais à toi de le placer au bon endroit :

Code:

$('.hover').hover(function(this.id){;
25/03/2013, 02h16
lolo34140

J'ai essayé de le placer un peu partout mais plus rien ne marche...
Je vois pas ou le mettre ou comment l'utiliser...
25/03/2013, 23h43
NoSmoking

Citation:

Envoyé par dragonno

Je te le place là mais à toi de le placer au bon endroit :

Code:

$('.hover').hover(function(this.id){;

:koi:...c'est sensé faire quoi?
26/03/2013, 11h35
dragonno

Rien pour moi, c'est juste pour lui montrer que le this.id doit se placer dans l'évènnement over de l'objet mais je ne connais pas l'écriture Jquery donc je dis de la placer au bon endroit.

Citation:

J'ai essayé mais je n'arrive pas à manipuler this.id ...

Citation:

Le "id" tu l'envoie en paramètre de la fonction lancée par le over.
Je te le place là mais à toi de le placer au bon endroit.