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 :

Changer la couleur d'un texte au passage de la souris sur une image


Sujet :

CSS

  1. #1
    Membre du Club
    Homme Profil pro
    Particulier
    Inscrit en
    Janvier 2013
    Messages
    80
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Particulier

    Informations forums :
    Inscription : Janvier 2013
    Messages : 80
    Points : 49
    Points
    49
    Par défaut Changer la couleur d'un texte au passage de la souris sur une image
    Bonjour à tous !
    Bonne année, bonne santé, et tout ce qui va avec !

    Voilà, j'aimerai que la couleur d'un texte change, quand je passe la souris sur une image.
    Voilà ce que j'ai déjà fait :
    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <html>
    <head>
    <link href="CSS.css" media="all" rel="stylesheet" type="text/css">
    </head>
    <body>
     
    	<div id="images"><img src="http://upload.wikimedia.org/wikipedia/commons/5/56/White_shark.jpg"><p>Requin blanc</p></div>
     
    </body>
    </html>
    Code CSS : 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
    #images img
    {
    	height : 300px;
    	width : auto;
     
    } 
     
    #images img:hover p
    {
    	color : #0052f0;
    }
     
    body
    {
    	margin : 50px;
    }

    Je pensais que les ligne 8 à 11 du code CSS indiquait "quand la souris passe sur l'image, le texte deviens de couleur #0052f0", mais il ne se passe rien...

    Pouvez-vous m'aider, s'il vous plaît ?
    Merci d'avance à ceux qui me répondront !

  2. #2
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 53
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Points : 91 220
    Points
    91 220
    Billets dans le blog
    20
    Par défaut
    Quand tu écris img:hover p, cela recherche les balises <p> contenues dans une balise <img> (ce qui n'a pas beaucoup de sens d'ailleurs ).

    Dans ton cas, c'est plutôt un sélecteur d'adjacence qu'il faut utiliser :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    img:hover + p{}
    img:hover ~ p{}

  3. #3
    Rédacteur

    Avatar de Torgar
    Homme Profil pro
    Développeur Web
    Inscrit en
    Août 2007
    Messages
    2 334
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 38
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Août 2007
    Messages : 2 334
    Points : 8 040
    Points
    8 040
    Par défaut
    Pfff, Bovino n'a pas perdu en vigueur, ni en rapidité avec cette nouvelle année

    Bref, je rajouterai qu'il faut aussi déclarer un doctype.

  4. #4
    Membre du Club
    Homme Profil pro
    Particulier
    Inscrit en
    Janvier 2013
    Messages
    80
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Particulier

    Informations forums :
    Inscription : Janvier 2013
    Messages : 80
    Points : 49
    Points
    49
    Par défaut
    Merci beaucoup, ça marche !

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

Discussions similaires

  1. Réponses: 30
    Dernier message: 12/07/2013, 19h41
  2. Commentaires plus ou moins longs au passage de la souris sur une image
    Par super_newbie_pro dans le forum Balisage (X)HTML et validation W3C
    Réponses: 7
    Dernier message: 08/08/2008, 08h40
  3. Afficher une bulle au passage de la souris sur une image
    Par Bubale dans le forum Macros et VBA Excel
    Réponses: 8
    Dernier message: 27/05/2008, 14h04
  4. Ouvrir une fenêtre au passage de la souris sur une image
    Par debie1108 dans le forum Général JavaScript
    Réponses: 14
    Dernier message: 02/05/2007, 05h11
  5. Réponses: 2
    Dernier message: 09/10/2006, 09h14

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