Changements de styles et :hover

Version imprimable

02/02/2015, 11h26
StripMat

Changements de styles et :hover

Bonjour,

J'ai dans une page des menus déroulants verticaux sur lesquels j'applique deux méthodes pour display les sous-menus, l'une en css par des :hover sur les items parents, l'autre en javascript au clic, c'est à la base uniquement pour IE9 (causes transitions CSS3) mais j'ai décider de permettre à l'utilisateur moins à l'aise avec sa souris de changer de mode via un bouton.

Je procède au changement de mode en changeant la classe du body, sa fonctionne presque sauf pour le retour du mode "au clic" au mode "hover", les :hover ne semblent plus actif... Pourtant le body à bien la bonne classe mais les "hover" ne prennent plus, au survol rien ne se passe :/

Dois-je tout passer en javascript pour faire ce que je veux ou puis-je garder une methode en CSS et l'autre en JS ?

Comment procéder ?
02/02/2015, 11h39
StripMat
J'ai finalement trouvé une solution, ce n'est pas l'idéale mais imposer un rechargement de page au moment du retour au mode "normal" (= :hover) réactive les event hover.

avec un simple
Code:

1 2 location.reload()
Si y a moyens de les "réactiver" sans recharger la page, je suis preneur !
02/02/2015, 19h52
NoSmoking

Bonjour,
tout d'abord je tiens à dire que je n'ai pas tout compris :oops:

Citation:

Dois-je tout passer en javascript pour faire ce que je veux ou puis-je garder une methode en CSS et l'autre en JS ?

Très souvent les deux ensembles ne font pas bon ménage sauf si c'est pour faire un changement de classe en javascript, là il n'y a pas trop de risque. Dans ton cas et comme tu cibles IE9 (un hybride) en priorité je dirais reste en javascript ou encore reste simple dans ton approche du menu, les effets n'étant somme tout pas une fonctionnalité importante et il n'est pas forcément justifié d'y passer trop de temps.
03/02/2015, 09h15
StripMat

C'est vrai que je me complique un peu, mais c'est un projet de stage que je devrai probablement présenter lors d'un examen, donc je prend quelques libertés pour ajouter des petits trucs en plus.

Instaurer un deuxième mode de déroulement des menus c'était secondaire mais j'y suis arrivé, en changeant de classe via javascript justement. J'ai créé ce petit bout d'code surtout pour éviter les futurs : "Hé tes menus c'est trop chian j'arrive pas à cliquer à tel endroit." de certains utilisateurs moins à l'aise (dans l'ensemble tous mes clients en sont contents).

Ma question était surtout de savoir comment ré-activer les évenements CSS.

Par exemple, ma méthode de déroulement des sous menus en CSS se base sur des :hover et ne doit être actif que si <body> est de classe "normale" et la méthode en JS ne doit etre active que si <body> est d'une autre classe. Lors du passage de

Code:

<body class="normal'>

à

Code:

<body class="compat">

Le javascript prend bien le relai, mais le mouvement inverse ne réactive pas la méthode en CSS, les :hover ne prennent simplement plus, comme désactivés.

La solution que j'ai est de reload la page, mais peut-être est-ce une problématique connu et qu'il existe un trick pour y palier.

Sinon, tant pis :mrgreen:

Citation:

La solution que j'ai est de reload la page,

Aucune raison, je pense que tu ré-appliques mal la class ou que tu as un conflit de spécificité

- Règles d'application des styles CSS et gestion des conflits.

Un petit exemple pour test

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
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Modification de la classe du BODY</title>
<meta name="Author" content="NoSmoking">
<style>
/* pour tous les styles */
html, body{
  margin:0 1em;
  padding:0;
  font-size:100%;
  font: 1em/1.5 Verdana, sans-serif;
}
ul {
  margin:0;
  padding:2px;
  list-style:none;
  display:block;
  width:20em;
  color:#CCC;
  cursor:pointer;
  border:1px solid #CCC;
}
ul li {
  border:1px solid transparent;
  padding:0.25em 0.5em;
}
/* styles particuliers */
.blue ul li:hover {
  background:#C1E0FF;
  border:1px solid #6495ED;
}
.blue h1{
  color:#069;
}
.blue ul{
  color:#00F;
  border:1px solid #89A;
}
</style>
</head>
<body>
<h1>Modification de la classe du BODY</h1>
<ul>
  <li>Menu #1</li>
  <li>Menu #2</li>
  <li>Menu #3</li>
</ul>
<p>
<button onclick="document.querySelector('BODY').classList.toggle('blue')">Inverse Style</button>
</p>
</body>
</html>

Attention classList n'est pas reconnu par IE9 et il me semble que tu y tiens !

04/02/2015, 09h46
StripMat
J'ai regardé ton exemple et c'est typiquement ce que je cherche à faire, seulement j'ai bien regardé, le changement de classe opère bien, d’ailleurs le style réagit et change, seulement je ne sais pas, les events :hover ne prennent plus.

Sauf que j'utilise pas classList moi, mais du jQuery, sa peut quand même pas venir de la ? :weird:
Code:

1 2 3 4 $('#toggletonormal').on( "click", function(){ $('body').attr("class", "normal"); }
J'vais aller vérifier mon CSS voir si j'ai pas des conflits maintenant
04/02/2015, 18h43
NoSmoking

Dans ce cas il eut mieux valu que tu utilises .toggleClass()
05/02/2015, 09h28
StripMat

D'accord, j'ai modifié ma fonction pour utiliser cette méthode .toggleClass(), sa fonctionne tout pareil mais je n'arrive pas à m'affranchir de location.reload() pour ré-activer les :hover :weird:
05/02/2015, 21h31
NoSmoking

Désolé mais sans une once de source il sera difficile de voir d'où vient le problème !