Desactivation de la fonction HOVER lors de l'utilisation de mon code javascript

Version imprimable

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:

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:

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:

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

05/09/2018, 22h25
psychadelic

Citation:

Desactivation de la fonction HOVER lors de l'utilisation de mon code java

1 - heu, tu confonds Java et JavaScript, tu cherches à te faire lyncher ? :aie:

2 - tu as un message d'erreur FATALE quand on regarde dans le debogeur =>
An unsupported character encoding was declared for the HTML document using a meta tag. The declaration was ignored.
IL FAUT REGARDER CE QUE FAIT SONT CODE EN UTILISANT LE DEBOGUER

dans ton cas tu confonds l'encodage UFT-8 et UTF-8 ( mettre les lettres dans le bon ordre!)

3 - pourquoi mettre la libraire jQuery ????

Pour ton problème il faut utiliser différentes classes avec chacune un des tailles du width à utiliser avec mettre les :hover qui leur correspondent
et en javacript assigner les clases à utiliser et non y changer les valeur css du width.
06/09/2018, 10h27
Opal_m

javascript*

Salut, merci pour ta réponse.

Je fais souvent l'erreur navré faut que j'arrête pour java ou javascript haha
Je pense que la librérie Jquery sera utile plus tard pour l'instant je ne sais pas l'utiliser mais cela ne me gêne pas dans l'état

Sinon pour ta réponse j'ai malheureusement pas su comment l'utiliser qu'en faire, je vais tenter de m'expliquer plus clairement j'ai encore beaucoup de mal..
0) La bande à une taille assez fine disons "x"
1) Si le curseur passe sur la bande à gauche elle s'elargit (hover)
2) Si l'utilisateur clique sur la banque à gauche elle s'élargit d'avantage et garde sa forme (javascript)
3) Si l'utilisateur clique ailleurs que sur la bande (sur le calque, il y a un calque qui devient opaque lorsque l'on clique sur la bande) la bande retrouve sa taille "x" initiale, mon problème ici étant que : LA FONCTION HOVER NE MARCHE PLUS :aie:

J'espère n'avoir offensé personne en confondant java et javascript ;)

En attendant votre réponse,

Cordialement,

Citation:

Envoyé par Opal_m

0) La bande à une taille assez fine disons "x"
1) Si le curseur passe sur la bande à gauche elle s'elargit (hover)
2) Si l'utilisateur clique sur la banque à gauche elle s'élargit d'avantage et garde sa forme (javascript)
3) Si l'utilisateur clique ailleurs que sur la bande (sur le calque, il y a un calque qui devient opaque lorsque l'on clique sur la bande) la bande retrouve sa taille "x" initiale, mon problème ici étant que : LA FONCTION HOVER NE MARCHE PLUS :aie:

heu, pourquoi ignores tu ce que j'avais écrit ????

Citation:

Envoyé par psychadelic

Pour ton problème il faut utiliser différentes classes....

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE HTML>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>utilise les classes</title>
  <style>
    body {
      margin: 0px;
      display: flex;
      align-items: center;
    }
    body > div {
      display: block;
      height: 100vh;  
      transition: 2s;    
    }
    #menu {  background-color: lightblue; }
    #calque { background-color: lightcoral; }
 
    #menu.PosZero { width: 10%; }
    #calque.PosZero { width: 90%; }
 
    #menu.PosHoverMenu { width: 20%; }
    #calque.PosHoverMenu { width: 80%; }
 
    #menu.Click_Menu { width: 40%; }
    #calque.Click_Menu { width: 60%; }
</style>
</head>
<body>
  <div id="menu" class="PosZero">
      menu
  </div>
  <div id="calque" class="PosZero">
      calque
  </div>
<script>
  var
    elm_menu        = document.getElementById("menu"),
    elm_calque      = document.getElementById("calque")
  ;
  elm_menu.onclick = function() {
    elm_menu.className = elm_calque.className = 'Click_Menu';
  };
  elm_menu.onmouseover = function() {
    if (elm_menu.className == 'PosZero') 
      elm_menu.className = elm_calque.className = 'PosHoverMenu';
  };
  elm_menu.onmouseout = function() {
    
    if (elm_menu.className == 'PosHoverMenu')
      elm_menu.className =  elm_calque.className = 'PosZero';
  };
  elm_calque.onclick = function() {
      elm_menu.className = elm_calque.className = 'PosZero';
  };
</script>
</body>
</html>

06/09/2018, 16h14
Invité

Bonjour,

1- dans le code fourni dans ton 1er message, remplace :

Code:

contMenu.style.width = '6%';

par

Code:

contMenu.style.width = '';

C'est tout. :whistle:

2- Sinon, pour illustrer ce que ~~crie le psychotique~~ dit psychadelic, UNE SEULE classe suffit :
ajoute au CSS :

Code:

#contMenu.expanded { width:18%; }

et remplace :

Code:

contMenu.style.width = '18%';

par

Code:

contMenu.classList.add('expanded');

et

Code:

contMenu.style.width = '6%';

par

Code:

contMenu.classList.remove('expanded');

C'est re-tout. :whistle2:
07/09/2018, 10h20
Opal_m

Quelle efficacité je n'aurais jamais pensé à trouver une méthode comme celle-ci, je test ça super vite mais ça me semble top !

Merci beaucoup !!! :)

Bonne journée à vous tous