Discussion :

[noobyyy]

salut à tous,

j'ai une fonction qui change les attributs d'un input lorsqu'il y a des erreurs par exemple, voici un extrait:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
	document.getElementById(id_nom).style.backgroundColor = "red";
	document.getElementById(id_nom).style.border = "1px solid #8F0000";
	document.getElementById(id_nom).style.color = "white";

mais mon soucis c'est que par défaut j'ai:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
.style:hover {
 
	background-color:#BFD9FF; /* bleu ciel */
	color:#3E79A3;
}

et donc pour ceux qui me suive, mon problème est que lorsque mon input change d'attributs je perds les informations du hover comment faire pour justement les garder ?

résumé:
avant: couleur par défaut + hover couleur bleu
erreur: couleur rouge sans rien
après: couleur par defaut sans hover bleu

merci pour votre aide.

[Auteur]

bonjour,


change le className de ton objet plutôt que de changer les propriétés une à une

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
function Erreur()
{
	document.getElementById("idInput").className="erreur";
}
 
function Correct()
{
	document.getElementById("idInput").className="correct";
}

puis dans la feuille de styles :

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
 
.correct{
 	background-color: #FFFFFF;
	color: #000000;
}
 
.correct:hover {
 	background-color: #BFD9FF; /* bleu ciel */
	color: #3E79A3;
}
 
.erreur{
	background-color: #FF0000;
	border: 1px solid #8F0000;
	color: white;
}

en passant dans ta CSS n'appelle pas ta feuille de styles "style" :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
.style:hover {
 
	background-color:#BFD9FF; /* bleu ciel */
	color:#3E79A3;
}

cela peut prêter à confusion ensuite dans le code HTML ou javascript.

[noobyyy]

ah oui pas bête !