Menu hover et masquage (jQuery)
#1
Hello,

Cela fait des heures que je bosse sur le sujet mais... Je n'arrive pas à faire un truc qui est sûrement simple à réaliser...

Actuellement je passe sur un menu, ça m'ouvre une fenêtre (assez banale) MAIS ce que j'ai dû mal à faire c'est :

Vérifier que le joueur quitte bien le survol du lien du menu pour aller sur la fenêtre qui s'est ouvert (grâce au survol du lien du menu)

SI c'est n'est PAS le cas, on ferme la fenêtre qui s'est ouvert

Genre un truc comme ça...
Code :
// On attend qu'on sort du lien du menu
$('.bt_troupes').on('mouseleave', function(){
    // Si on ne va pas directement sur le cadre qui s'est ouvert on ferme ledit cadre
    if(!$('.cadre_troupes').on('quelle fonction ?!'))
        $('.cadre_troupes').hide();
});

Merci d'avance,
Répondre
#2
Salut,

tu pars sur une mauvaise réflexion dans cette implé: ne cherches pas à faire du "si je quitte tel truc pour aller sur tel autre" car les transitions, c'est ingérable. Fais-le soit simplement en CSS (element:hover ~ .sibling-to-show { display: block; }) qui me semble simple et adaptable pour d'autres supports sans souris, soit un event listener mouseenter (ou mouseover?...) sur le body, qui ferme le menu, et un event listener mouseenter (ou mouseover?...) sur le menu qui stoppe la propagation de cet élément.



Note que je n'aime pas trop les menus hover: d'un point de vue utilisabilité, je ne les trouve pas terribles. Pour les tactiles, c'est mort et pour peu qu'un seul petit pixel d'écart se place au mauvais endroit, le menu devient inutilisable (je sais: j'en ai sur le blog https://toile.reinom.com mais je les trouve acceptable, d'une part parce que je n'ai pas envie de changer le thème, mais surtout parce que le click sur le bouton de menu survolable fait arriver sur une page qui contient les mêmes sous-menu que le survol: le survol n'est alors qu'un raccourcis pour accéder aux sous-menus, et non pas un passage obligé).

Note aussi que jQuery, à part rajouter de la lourdeur et freiner les dev dans la curiosité de "quelles API javascript sont sorties ces derniers temps?" ne sert pas à grand chose... document.querySelector('.br_troupes').addEventListener('mouseleave', e => { ... }) ne recourt à aucune lib 16

Note enfin que j'ai éditer le titre, pour en trouver un plus clair.
Répondre
#3
Salut,

Merci ! Bon j’abandonne l’idée :p

Je vais voir pour les querySelector and co pour supprimer au max les libs jQuery 2

Merci pour le titre lol je ne savais pas quoi mettre
Répondre


Sujets apparemment similaires...
Sujet Auteur Réponses Affichages Dernier message
  [Javascript] problème de mouse hover Argorate 19 4 538 08-07-2011, 01:17 AM
Dernier message: Argorate
  Hover en Javascript Fathom 3 1 440 06-04-2011, 11:39 PM
Dernier message: Fathom



Utilisateur(s) parcourant ce sujet : 1 visiteur(s)