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