Desactivation de la fonction HOVER lors de l'utilisation de mon code javascript
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 ! :)
