hover non fonctionnel

Version imprimable

Bonjour, je travail sur objet qui est un bloc de recherche sous ez publish.
Code:

1 2 <div align=right><input type="submit" title="lancez la recherche" name="ok" value="OK" style="background-color:#d20047;a:hover{ background : #646464;text-decoration: none;} ;color: #ffffff;border: 0px" ></div>
Le hover ne fonctionne pas, il s'agit d'un problème html. Ma manière de l'écrire ne doit pas être bonne.

25/08/2009, 16h18
andry.aime

Bonjour,
C'est dans une balise input que tu mets le a:hover, c'est normale que ça ne marche pas.
25/08/2009, 16h40
smillingbandit
Dans ce cas le
Code:

1 2 a:hover{ background : #646464;
Je le mets ou exactement par rapport au reste du code ?
25/08/2009, 17h52
cssman
a est une balise, au même titre que input. Tu ne peux pas mettre une balise dans un attribut !

:hover est une pseudo-classe, à appliquer à un sélecteur. Genre :
Code:

1 2 3 4 5 6 7 a:hover { .... } input:hover { ... }
ou mieux en ce qui te concerne :
Code:

1 2 3 4 input[type=submit]:hover { background : #646464; }
Et ça tu ne le mets pas en inline, tu le sors de ton code html pour le mettre dans une déclaration de styles entre les balises head
Code:

1 2 3 4 5 6 <head> <style type="text/CSS"> ... </style> </head>
ou mieux dans une feuille de style externe.

En passant : l'attribut align=right est déprécié. Ça aussi ça se déclare par un style.
25/08/2009, 18h01
Macmillenium

Citation:

Envoyé par cssman

a est une balise

- A est un élément;
- <a> est une balise;
- </a> est une balise;

Parler de A, c'est parler de l'élément A.

Citation:

Envoyé par cssman

Tu ne peux pas mettre une balise dans un attribut !

Ou tout simplement, l'attribut STYLE ne peut contenir que des déclarations, pas de règles ;)
25/08/2009, 18h03
Doki95
Salut,

Je crois que le hover sur un input ne fonctionne pas sous ie6. Tu es obligé de mettre une balise a contenant un href. Tu peux faire comme ça :
Code:

1 2 3 4 <a href="javascript:void(0)"> <input type="submit" title="lancez la recherche" name="ok" value="OK" /> </a>
Et tu rajoutes le css correspondant comme te la indiqué cssman.
Enfin pas tout à fait. Le hover se retrouve bien sur le a avec cette solution.

Doki

Donc si j'ai bien compris, je dois ajouter dans le css:
Code:

1 2 3 input[type=submit]:hover { background : #646464; }
Et dans le html:
Code:

1 2 3 <a href="javascript:void(0)"> <input type="submit" title="lancez la recherche" name="ok" value="OK" /> </a>
Ca me parait un peu étrange.

Citation:

Envoyé par smillingbandit

Ca me parait un peu étrange.

Sans complications :
Code:

1 2 3 <input type="submit" title="lancez la recherche" name="ok" value="OK" onmouseover="this.style.backgroundColor='#646464'" onmouseout="this.style.backgroundColor=''" />
Pas besoin d'un élément A.

Merci Macmillenium, ca fonctionne mais quand je passe la souris dessus cela reste gris par la suite alors que j'aimerai que ca revienne en rouge #d20047 une fois que la souris n'est plus dessus.
Code:

1 2 <div align=right><input type="submit" title="lancez la recherche" name="ok" value="OK" onmouseover="this.style.backgroundColor='#646464'" onmouseout="this.style.backgroundColor=''" style="background-color:#d20047;text-decoration: none; ;color: #ffffff;border: 0px" ></div>

Code:

1
2
3
 
<div align=right><input type="submit" title="lancez la recherche" name="ok" value="OK" onmouseover="this.style.backgroundColor='#646464'" onmouseout="this.style.backgroundColor='#d20047'" style="background-color:#d20047;text-decoration: none;
;color: #ffffff;border: 0px" ></div>

26/08/2009, 13h10
smillingbandit

Merci beaucoup, ca marche parfaitement.