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

**Opal_m** · 05/09/2018, 18h08

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 !

**psychadelic** · 05/09/2018, 22h25

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 ?

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.

**Opal_m** · 06/09/2018, 10h27

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

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

En attendant votre réponse,

Cordialement,

**psychadelic** · 06/09/2018, 15h50

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

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

Envoyé par psychadelic

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

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

Invité · 06/09/2018, 16h14

Bonjour,

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

Code JavaScript :

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

			contMenu.style.width = '6%';

par

Code JavaScript :

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

			contMenu.style.width = '';

C'est tout.

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

Code css :

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

#contMenu.expanded { width:18%; }

et remplace :

Code JavaScript :

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

			contMenu.style.width = '18%';

par

Code JavaScript :

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

			contMenu.classList.add('expanded');

et

Code JavaScript :

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

			contMenu.style.width = '6%';

par

Code JavaScript :

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

			contMenu.classList.remove('expanded');

C'est re-tout.

**Opal_m** · 07/09/2018, 10h20

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

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

JavaScript

Discussions similaires

Partager

Partager