Bonjour � tous !
Je vous explique mon probl�me aujourd'hui, j'ai cr�e une bande verticale qui s'�largit lors du passage de la souris sur l��l�ment.
J'ai voulu augmenter la taille de ce menu en la figeant lors d'un clic sur ce menu et lui faire reprendre sa taille initiale lorsque l'on clique sur un autre �l�ment.
Tout marche bien, cependant le hover ne s'active plus une fois que le menu � repris sa taille initiale...

J'esp�re m'�tre exprim� dans des termes compr�hensibles, je suis tr�s largement d�butant en language web

Voici mes codes :
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
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
<!DOCTYPE HTML>
<html>
 
<head>
<meta charset="UFT-8">
<title>Liste d'accès aux différentes leçons !</title>
 
<link rel="stylesheet" href="css/styles.css" />
 
</head>
 
<body>
 
<div id="contMenu">
	<div id="menu">
	</div>
</div>
 
<div id="calque">
 
</div>
 
<div id="conteneur">
 
	<div class="ligne Intro" >
		<div class="bloc Intro">
		</div>
		<div class="slider Intro">
		</div>
	</div>
 
	<div class="ligne entete">
		<div class="bloc">
		</div>
		<div class="slider">
		</div>
	</div>
 
	<div class="ligne">
		<div class="bloc">
		</div>
		<div class="bloc">
		</div>
		<div class="bloc">
		</div>
		<div class="bloc">
		</div>
	</div>
 
	<div class="ligne">
		<div class="bloc">
		</div>
		<div class="bloc">
		</div>
		<div class="bloc">
		</div>
		<div class="bloc">
		</div>
	</div>
 
	<div class="ligne entete">
		<div class="slider">
		</div>
		<div class="bloc">
		</div>
	</div>
 
	<div class="ligne">
		<div class="bloc">
		</div>
		<div class="bloc">
		</div>
		<div class="bloc">
		</div>
		<div class="bloc">
		</div>
	</div>
 
	<div class="ligne">
		<div class="bloc">
		</div>
		<div class="bloc">
		</div>
		<div class="bloc">
		</div>
		<div class="bloc">
		</div>
	</div>
 
	<div class="ligne">
		<div class="bloc">
		</div>
		<div class="bloc">
		</div>
		<div class="bloc">
		</div>
		<div class="bloc">
		</div>
	</div>
 
	<div class="ligne">
		<div class="bloc">
		</div>
		<div class="bloc">
		</div>
		<div class="bloc">
		</div>
		<div class="bloc">
		</div>
	</div>
 
</div>
</body>
 
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript" src="js/script.js"></script>
 
</html>

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
div, #menu, #contMenu{
	box-sizing: border-box; /* AJOUT pour prise en compte bordure dans width et height */
}
body{
	margin : 0px;
	display: flex;
}
 
#contMenu{
	min-height: 100vh;
	position : fixed;
	width:6%;
	/* background-color: hsla(214, 27%, 65%); */
	background-color: black;
	border: 1px solid blue;
	transition : 2s;
	z-index:50;
}
 
#menu{
	min-height: 100vh;
	width: 100%;
	position: relative;
	background-color : blue;
	transition : 2s;
}
 
 
#calque{
	position: fixed;
	min-height: 100vh;
	margin-left: 6%;
	width: 94%;
	background-color: hsla(0, 100%, 100%,0);
	z-index : 5;
	transition : 2s;
}
 
#contMenu:hover {width:12%;}
#contMenu:hover > #menu{background-color: red;}
#contMenu:hover ~ #calque{background-color: hsla(0, 100%, 100%,0.6);}
 
#conteneur{
position: absolute;
width: 94%;
border: 1px solid red;
margin-left: 6%;
/* background-color: hsla(0, 100%, 50%,0.2); */
box-sizing: border-box; 
}
 
.ligne{
	position : relative;
	width:100%;
	display: flex;
	background-color : blue;
}
 
.bloc{
	width: 25%;
	border : 1px solid blue;
	/* background-color: hsla(35,13%,82%,1); */
	background-color : green;
	position : relative;
}
 
.slider{
	width:75%;
	border: 1px solid blue;
	/* background-color: hsla(250, 100%, 50%,0.2); */
	background-color : green;
	position : relative;
}

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
39
40
 
window.onload = function() {
	resize_blocs();
};
 
window.onresize =function()  {
	resize_blocs();
};
 
// déjà donné gracieusement par le forum 
 
function resize_blocs(){
	var blocs = document.querySelectorAll('.bloc');
	blocs.forEach( function(bloc){
		var style = window.getComputedStyle(bloc);
		bloc.style.height = style.width;
		console.log( bloc.style.height )
	});
 
}
 
	var compteur = 0 ;
	console.log(compteur);
 
	document.querySelector('#contMenu').onclick = function() {
		if(compteur === 0) {
			contMenu = document.getElementById('contMenu');
			contMenu.style.width = '18%';				
			compteur = 1;
		}
	}
 
	document.querySelector('#calque').onclick = function (){
		if(compteur === 1) {
			contMenu = document.getElementById('contMenu');
			contMenu.style.width = '6%';
			console.log(contMenu.style.width);
			compteur = 0;
		}
	}
Je reste ouvert � toute critique constructive concernant l'ensemble de mon code ci-pr�sent.

Je vous remercie d'avance pour vos conseils et je les attends impatiemment !