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/

Display: none sur div enfant

JavaScript

Vue hybride

Discussions similaires

Partager

Partager