28172 sujets

CSS et mise en forme, CSS3

[RESOLU - erreur syntaxe] Boutons formulaire et hover !

Bonjour, Smiley smile

Une petite question :
Je viens de créer mon formulaire (XHTML/CSS) dont 2 boutons pour le "valider" et le "réinitialiser".
Pour une question déco, je souhaitais que le background des boutons change de couleur lorsque la souris survole ces derniers mais aucun effet ! Smiley ohwell

Côté HTML j'ai mis :

<p class="boutons">
   <input type="submit" /> <input type="reset" />
</p>


Côté CSS:


.boutons input:hover;
{
  background-color: #e4fea4; 
  color: black;
  font-weight: bold;
}


P-e n'est-ce pas possible ou p-e est-ce moi qui est fait une erreur sachant que je maîtrise pas encore à fond !
Et si pas possible en XHTML/CSS est-ce ensuite possible avec PHP (que je connais pas encore)?

Merci par avance pour vos lumières! Smiley cligne
Modifié par Claw69 (29 Oct 2010 - 13:49)
Salut,

C'est tout à fait possible d'obtenir l'effet souhaité en CSS (le site qui se cache derrière le bouton WWW de ma signature en montre un exemple Smiley cligne ).

Après, tout dépend sur quelle version de navigateur tu as testé : s'il s'agit d'une version d'Internet Explorer antérieure à la 7, il y a de fortes chances que ça ne fasse aucun effet.
Salut Victor, merci.

Je suis sous Google Chrome.

Le hover marche bien pour les liens, les zones de formulaires, etc mais là pour les boutons de formulaire, je n'arrive à aucun résultat. Smiley ohwell
Claw69 a écrit :
Je suis sous Google Chrome.

Le hover marche bien pour les liens, les zones de formulaires, etc mais là pour les boutons de formulaire, je n'arrive à aucun résultat. Smiley ohwell

Bizarre... Normalement, la pseudo-classe :hover est correctement interprétée par Google Chrome.
Après de nouveaux tests, je pense que j'ai un conflit de plusieurs "hover" .

Mon code CSS complet est :


input:focus, textarea:focus /* Quand le curseur est sur un champ */         
{
   background-color: #e0eafa;
   color: blue;
}
 
input:hover, textarea:hover /* Quand le curseur survol le champ */            
{
   background-color: #f0f0f0;
} 

.boutons input          /* boutons */
{
  background-color: #f7e271; 
  color: black;
  font-weight: bold;
}

.boutons input:hover;   /* survol bouton */
{
  background-color: #e4fea4; 
  color: black;
  font-weight: bold;
}


En fait si je désactive ".boutons input" , l'effet "hover" marche bien sur les boutons mais en fait ils prennent les propriétés que j'ai déclaré dans le "input:hover, textarea:hover" (logique) mais je n'arrive toujours pas à déclarer un "hover" personnalisé pour UNIQUEMENT les boutons.
Est-ce que j'utilise la bonne syntaxe ?
Est-ce que je m'y prend mal?
Est-ce tout simplement impossible?

Merci par avance.
Modifié par Claw69 (29 Oct 2010 - 11:08)
Que la honte s'abatte sur moi !! Smiley confused
J'avais pas fait gaffe à ce point-virgule qui trainait après mon ".boutons input:hover"

Et comme par hasard, tout baigne maintenant ! Smiley biggrin

Un grand merci à toi Florent, car j'aurais pu chercher encore longtemps ! Smiley jap


Sujet donc résolu, qui finalement n'avait pas de raison d'être.
Sujet clos
Aller à