IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Bibliothèques & Frameworks Discussion :

tween vs :hover = supprimer :hover ? [MooTools]


Sujet :

Bibliothèques & Frameworks

  1. #1
    Candidat au Club
    Profil pro
    Inscrit en
    Septembre 2010
    Messages
    4
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Septembre 2010
    Messages : 4
    Points : 4
    Points
    4
    Par défaut tween vs :hover = supprimer :hover ?
    Bonjour à tous et bienvenu sur le forum
    J'ai une petite question à vous soumettre si vous le voulez bien :

    J'ai un lien a sur lequel j'ai appliqué un hover

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
     
    .btn_postuler a{
         position:absolute;
         right: -164px;
     
    }
     
    .btn_postuler a:hover{
        right:0;
    }
    Après j'applique un effet Mootools, pour que ce soit plus fluide et fun et sympa :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    $$('.btn_postuler a').addEvent('mouseenter', function(){
     
    	this.tween('right', '0');
    });
     
    $$('.btn_postuler a').addEvent('mouseleave', function(){
     
    	this.tween('right', '-160px;');
    });
    Ca marche MAIS au premier survol le style :hover prend le dessus sur le code Mootools et mon bouton se retrouve plaqué à droite sans être animé.

    Si vous savez comment annuler un hover par exemple ou si vous avez une autre idée, je suis super preneur et vous en remercie d'avance !!



    Merci à vous.

    Gaëtan

  2. #2
    Expert éminent sénior

    Avatar de vermine
    Profil pro
    Inscrit en
    Mars 2008
    Messages
    6 582
    Détails du profil
    Informations personnelles :
    Âge : 39
    Localisation : Belgique

    Informations forums :
    Inscription : Mars 2008
    Messages : 6 582
    Points : 79 912
    Points
    79 912
    Par défaut
    Bonjour et bienvenue.

    Pourrions-nous voir le code HTML ? Je me demande si le tween ainsi appliqué comprend qu'il y a effectivement un changement de position. Peut-être faudrait-il créer un objet Fx.Tween (ou Fx.Morph) et lui préciser un état d'origine.

  3. #3
    Candidat au Club
    Profil pro
    Inscrit en
    Septembre 2010
    Messages
    4
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Septembre 2010
    Messages : 4
    Points : 4
    Points
    4
    Par défaut
    Merci pour ta réponse.
    En effet ca doit marcher, puisqu'on détermine la position de départ dans le TWEEN.
    Entre-temps j'ai trouvé une autre réponse sur un autre site :
    Bon après quelques tests c'est nickel comme ça ! J'ajoute dynamiquement une classe à mes boutons
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
     
    $$('.bloc_offre .btn_postuler a').addClass('withJS');
    Et derrière j'ai une nouvelle feuille de styles qui corrige le décalage du CSS de base
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
     
    .btn_postuler a.withJS:hover{
     
        right:-160px;
     
    }


    Plus de JS intrusif = que du bonheur cligne
    Mais je pense coupler les deux pour avoir d'avantage de possibilités.

    Merci.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 0
    Dernier message: 10/03/2016, 13h50
  2. Image et a:hover
    Par srvremi dans le forum Balisage (X)HTML et validation W3C
    Réponses: 3
    Dernier message: 28/08/2005, 21h46
  3. [CSS] Effet de hover qui ne fonctionne pas sous IE
    Par Ricou13 dans le forum Mise en page CSS
    Réponses: 6
    Dernier message: 14/06/2005, 09h39
  4. [CSS] balise:hover
    Par canabral dans le forum Mise en page CSS
    Réponses: 5
    Dernier message: 22/04/2005, 16h13
  5. Une technique pour :hover ?
    Par ¤dinky¤ dans le forum Mise en page CSS
    Réponses: 5
    Dernier message: 16/12/2004, 11h45

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo