Display: none sur div enfant

**lolo34140** · 23/03/2013, 23h42

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 css :

Sélectionner tout - Visualiser dans une fenêtre à part

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!

**dragonno** · 24/03/2013, 10h34

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
function cacher()
{
document.getElementById("id de back").display="none";
}

Bien sûr met l'id du back dedans.

**NoSmoking** · 24/03/2013, 11h25

Bonjour,
cela se réalise en pur CSS simplement

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**lolo34140** · 24/03/2013, 12h13

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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...

**NoSmoking** · 24/03/2013, 12h28

dans ce cas passe par les class

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**lolo34140** · 24/03/2013, 12h39

Effectivement comme ça ça marche bien pour masquer et cacher le back et l'image back :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

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/

**dragonno** · 24/03/2013, 14h11

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.

**lolo34140** · 24/03/2013, 14h22

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...

**dragonno** · 24/03/2013, 14h37

Tiens j'ai trouvé le lien :

http://www.developpez.net/forums/d13...se-javascript/

**lolo34140** · 24/03/2013, 15h16

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)

**lolo34140** · 24/03/2013, 16h23

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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...

**aku84** · 24/03/2013, 16h30

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

masquera le premier enfant ("front shadow")

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

masquera le deuxième ("back")

Ca permet aussi de virer des ID inutiles

**lolo34140** · 24/03/2013, 16h43

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...

**aku84** · 24/03/2013, 16h51

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ?

**lolo34140** · 24/03/2013, 17h04

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/

**aku84** · 24/03/2013, 17h17

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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/

**aku84** · 24/03/2013, 17h40

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/

**lolo34140** · 24/03/2013, 17h58

Merci!

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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>&nbsp;&nbsp;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">&nbsp;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.

**NoSmoking** · 24/03/2013, 17h59

Une solution en CSS3

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**lolo34140** · 24/03/2013, 18h06

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...

Display: none sur div enfant

JavaScript

Discussions similaires

Partager

Partager