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

Mise en page CSS Discussion :

Effet hover sur titre avec passage souris sur texte


Sujet :

Survol d'un élément en CSS (:hover)

  1. #1
    Débutant  
    Profil pro
    Inscrit en
    Février 2007
    Messages
    356
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2007
    Messages : 356
    Points : 97
    Points
    97
    Par défaut Effet hover sur titre avec passage souris sur texte
    bonjour à tous

    j'aimerais avoir une animation sur un titre lorsque l'on passe la souris sur le titre en personne OU sur son paragraphe.

    Auriez vous un petit tuto s'il vous plait , car expliquer ca à google car pas évident

    Pour l'instant j'ai ca , mais c'est uniquement au passage de la souris sur le titre :

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
       <tr>
        <td style="border-bottom:1px solid white;"><a href="http://plenitude-beaute06.com/dannaprod/index.php?article6/reportage-des-coulisses-des-guignols-de-l-info"><strong>Reportage des coulisses des Guignols de l'info</strong><br/><br/>A l'occasion du festival de Cannes, j'ai eu l'honneur d'entrer sur le plateau des guignols de l'info. J'en ai profité pour en faire un reportage, et voilà le résultat.<a></td>
      </tr>


    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
    table td strong{
     
            -webkit-transition: all 0.2s ease-in-out; 
            -webkit-transition-duration: 0.2s;
    	    -moz-transition: all 0.2s ease-in-out; 
            -moz-transition-duration: 0.2s;	
    	    -o-transition: all 0.2s ease-in-out; 
            -o-transition-duration: 0.2s;
    		-ms-transition: all 0.2s ease-in-out; 
            -ms-transition-duration: 0.2s;
    		-khtml-transition: all 0.2s ease-in-out; 
            -khtml-transition-duration: 0.2s;
    }
     
     
    table td strong:hover, table td strong .active{
    background-color: #333333;
    	border-radius:0.5em;
        color: white;
    	padding:10px;
    }


    je vous remercie d'avance !

  2. #2
    Invité
    Invité(e)
    Par défaut
    Bonjour,
    remplace :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    table td strong:hover, table td strong .active{
    par
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    table td:hover strong {

  3. #3
    Débutant  
    Profil pro
    Inscrit en
    Février 2007
    Messages
    356
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2007
    Messages : 356
    Points : 97
    Points
    97
    Par défaut
    magnifique !!!! merci beaucoup !!

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

Discussions similaires

  1. Passage souris sur un rollover
    Par JCMANSION dans le forum ASP.NET
    Réponses: 2
    Dernier message: 01/06/2010, 09h46
  2. jouer un son sur une image passage souris
    Par ideal23 dans le forum Général JavaScript
    Réponses: 10
    Dernier message: 16/11/2009, 09h37
  3. appliquer une couleur au passage souris sur grpe de cellules
    Par mathieu_r dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 26/01/2006, 15h20
  4. passage souris sur 1 petite image --> affichage ds table
    Par nico_web dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 16/10/2005, 15h33
  5. Changer la couleur du texte lors passage souris sur un TD !
    Par Kokito dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 10/01/2005, 16h40

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