checkbox qui active un hover actif

Version imprimable

Bonjour à tous !

je pense que le problème se résout en css. Voici le code que j'ai :
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 <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:

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

Bonjour,
Avec quelques aménagements du code :

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

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 ! ;)

25/08/2013, 13h21
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 ?
25/08/2013, 13h30
Invité

Quelle "bande orange" ?

~~background-color:#FF8C00;~~ ?

En modifiant un peu le HTML je verrais ça :

Code:

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:

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

25/08/2013, 14h43
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é ?

Alors:
Code:

1 2 3 4 input[type=checkbox]:checked + .txt { position : absolute; color:white; }
http://codepen.io/anon/pen/Hodwf

C'est bon, j'ai trouvé !

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

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 !

25/08/2013, 15h17
rodolphebrd

Euh, apparemment vous êtes revenu au point de départ :roll:
25/08/2013, 15h42
pito2901

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