Discussion :

[pito2901]

Bonjour à tous !

je pense que le problème se résout en css. Voici le code que j'ai :

Code :

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
<style>
.videos_astuces
{
width:900px;
height:18px;
overflow:hidden;
transition: height 1s; 
-moz-transition: height 1s;
-webkit-transition: height 1s;
-o-transition: height 1s;
border: 1px solid #0060F0;
border-radius: 5px;  
}
 
.videos_astuces:hover
{
height:524px;
}
.menu_deroulant_astuce
{
color:black;
background-color:#FF8C00;
}
.checkbox
{float:right;
}
</style>

Code html :

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

1
2
3
4
5
6
7
8
9
10
 
<br />
<div class="videos_astuces">
<div class="menu_deroulant_astuce">
<span style="font-family: Verdana, sans-serif;">Changer le volume d'une chanson et l'exporter en mp3 avec Audacity</span>
<input type="checkbox" class="checkbox"><span class="checkbox" style="font-family: Verdana, sans-serif;">Laisser ouvert</span>
</div>
<div class="content_box" style="overflow: none;">
<iframe frameborder="0" height="506" src="http://www.youtube.com/embed/1cefBcHaz_U" width="100%"></iframe></div>
</div>

Il est sûrement possible en CSS de résoudre mon problème : lorsque j'active le chekbox "laisser ouvert", je voudrai que le hover reste actif (soit ouvert) et réciproquement mais comment ?
Si quelqu'un peut me donner le bout de code qui permet de résoudre ceci, je l'admirai énormément !
Merci d'avance.

Pito2901

[Invité]

Bonjour,
Avec quelques aménagements du code :

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
.videos_astuces
{
width:900px;
overflow:hidden;
border: 1px solid #0060F0;
border-radius: 5px;  
color:black;
background-color:#FF8C00;
}
 
.videos_astuces .content_box
{
height:0px;
overflow:hidden;
transition: height 1s; 
-moz-transition: height 1s;
-webkit-transition: height 1s;
-o-transition: height 1s;
}
.checkbox
{ 
float:right;
}
 
.videos_astuces:hover .content_box, 
.videos_astuces .content_box:hover,
.videos_astuces input[type=checkbox]:checked + .content_box
{
height:506px;
}

Code html :

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

1
2
3
4
5
6
7
<div class="videos_astuces">
	<span style="font-family: Verdana, sans-serif;">Changer le volume d'une chanson et l'exporter en mp3 avec Audacity</span>
	<input class="checkbox" type="checkbox" title="Laisser ouvert"/>
	<div class="content_box">
		<iframe frameborder="0" height="506" src="http://www.youtube.com/embed/1cefBcHaz_U" width="100%"></iframe>
	</div>
</div>

L'astuce (!) est ici : input[type=checkbox]:checked + .content_box
=> CSS Selectors : Adjacent sibling selectors

Et hop ! Un admirateur de plus !

[pito2901]

Super sympa, merci ça marche !

J'ai encore une question, est-il possible qu'on ne voit pas cette bande orange sur le long de la vidéo qui en fait est là à cause du checkbox, sachant que celui-ci doit resté à droite {float:right}. Je pense qu'il y a une histoire de mettre la vidéo en premier plan, mais malheureusement je ne maîtrise pas le sujet...
Avez-vous une solution ?

[Invité]

Quelle "bande orange" ?

background-color:#FF8C00; ?

[rodolphebrd]

En modifiant un peu le HTML je verrais ça :

Code html :

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

1
2
3
4
5
6
7
<div class="videos_astuces">
	<input class="checkbox" type="checkbox" title="Laisser ouvert"/>
  <span class="txt" style="font-family: Verdana, sans-serif;">Changer le volume d'une chanson et l'exporter en mp3 avec Audacity</span>
	<div class="content_box">
		<iframe frameborder="0" height="506" src="http://www.youtube.com/embed/1cefBcHaz_U" width="100%"></iframe>
	</div>
</div>

Code :

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
.videos_astuces
{
position: relative;
width:900px;
overflow:hidden;
border: 1px solid #0060F0;
border-radius: 5px;  
color:black;
background-color:#FF8C00;
}
 
.videos_astuces .content_box
{
height:0px;
overflow:hidden;
transition: height 1s; 
-moz-transition: height 1s;
-webkit-transition: height 1s;
-o-transition: height 1s;
}
.checkbox
{ 
float:right;
}
 
.videos_astuces:hover .content_box, 
.videos_astuces .content_box:hover,
.videos_astuces input[type=checkbox]:checked + span + .content_box
{
   height:506px;
}
input[type=checkbox]:checked + .txt {
   display:none;
}
 input[type=checkbox]:checked.checkbox  {
  position : absolute;
  right:0;
}

http://codepen.io/anon/pen/FogGf

[pito2901]

Merci, c'est ce que je voulais, mais si possible, est-ce qu'on peut laisser le titre "changer le volume..." et la vidéo en dessous une fois le checkbox activé ?

[rodolphebrd]

Alors:

Code :

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

1
2
3
4
input[type=checkbox]:checked + .txt {
  position : absolute;
  color:white;
}

http://codepen.io/anon/pen/Hodwf

[pito2901]

C'est bon, j'ai trouvé !

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
 
.videos_astuces
{
   position: relative;
   width:880px;
   overflow:hidden;
   border: 1px solid #0060F0;
   border-radius: 5px;  
   color:black;
   background-color:#FF8C00;
}
 
.videos_astuces .content_box
{
   height:0px;width:880px;
   overflow:hidden;
   transition: height 1s; 
   -moz-transition: height 1s;
   -webkit-transition: height 1s;
   -o-transition: height 1s;
}
.checkbox
{ 
   float:right;
}
 
.videos_astuces:hover .content_box, 
.videos_astuces .content_box:hover,
.videos_astuces input[type=checkbox]:checked + span + .content_box
{
   height:524px;
}
input[type=checkbox]:checked.checkbox  {
  position : absolute;
  right:0;
}

Code html :

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

1
2
3
4
5
6
7
8
9
 
<br />
<div class="videos_astuces">
	<input class="checkbox" type="checkbox" title="Laisser ouvert"/>
  <span class="txt" style="font-family: Verdana, sans-serif;">Changer le volume d'une chanson et l'exporter en mp3 avec Audacity</span>
	<div class="content_box">
		<iframe frameborder="0" height="524" src="http://www.youtube.com/embed/1cefBcHaz_U" width="100%"></iframe>
	</div>
</div>

Merci encore à tous !

[rodolphebrd]

Euh, apparemment vous êtes revenu au point de départ

[pito2901]

Non, je voulais juste que le div reste ouvert, mais pas que la vidéo "écrase" le span