18073 sujets

Questions générales et questions de débutants

Astuce Input Hover sous IE opérateur Void()

Internet explorer n'implémente pas les styles du type
input:hover {color:red;
background-color:white;
}

Un peu de javascript et ca marche
dans le css redéfinir le style comme suit:
a:hover input {color:red;
background-color:white;
cursor:pointer;
}

Dans le source Html encadrer vos champs input avec une balise href faisant appel à la l'opérateur javascrript Void() 
<a href="javascript:void(0)">
<input type="submit">
</a>

Smiley eek Et ca marche
Modifié par jeanlouis238 (06 Apr 2006 - 16:22)
Bonjour,
Pas très propre je trouve, un <a> à cet endroit-là, même si c'est valide.
Ca sert à quoi concrètement ? A rien.

Autant utiliser du vrai js à ce moment-là, avec une permutation de classe CSS aux évènements onmouseover, onmouseout, onfocus et onblur.
Tant pis pour les utilisateurs d'IE qui n'ont pas js d'activé, c'est un gadget visuel sans grande importance (en tout cas qui n'empêche pas la navigation, enfin normalement pas).
QuentinC a écrit :
Bonjour,
Pas très propre je trouve, un <a> à cet endroit-là, même si c'est valide.
Ca sert à quoi concrètement ? A rien.

Autant utiliser du vrai js à ce moment-là, avec une permutation de classe CSS aux évènements onmouseover, onmouseout, onfocus et onblur.
Tant pis pour les utilisateurs d'IE qui n'ont pas js d'activé, c'est un gadget visuel sans grande importance (en tout cas qui n'empêche pas la navigation, enfin normalement pas).

Bonjour
Cette astuce évite justement l'appel aux fonctions javascript précitées donc moins compliqué.
Je cherchais une solution à ce problème, je suis directement tombé sur ce topic. Smiley ravi

Merci pour cette solution ! Qui, de plus, est rapide à mettre en place ! Smiley cligne Smiley biggrin

Pour ce qui est du gadget visuel ... pas trop d'accord ... l'ergonomie et le design sont souvent liés et la gestion d'un évènement au survol d'un bouton est importante du point de vue utilisateur (navigation et plaisir visuel). Smiley langue
Modifié par Skyzoboy (04 May 2006 - 23:22)
Dans ce cas javascript est inutile :
<a href="#">
<input type="submit">
</a>

puisque IE reconnait :hover sur un lien

cela dit, je rejoins quentinC pour le côté pas propre.

plus propre:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
<head>
<title>test</title>
<script type="text/javascript">
<!--
if(!window.Event){ //IE mais pas Opéra
	document.onmouseover=function(){
		x=window.event.srcElement
		if(x.tagName=="INPUT")x.className="hoverInput_IE"
	}
	document.onmouseout=function(){
		if(x.tagName=="INPUT")x.className=""
	}
}
// -->
</script>
<style type="text/css">
input:hover,.hoverInput_IE {
color:red;
background-color:white;
}
</style>

</head>
<body >
<input type="button" value="bouton1" />
<input type="button" value="bouton2" />
<p>non influencé</p>
<input type="button" value="bouton3" />
</body>
</html>

Modifié par chmel (05 May 2006 - 12:09)
jeanlouis238 a écrit :
Internet explorer n'implémente pas les styles du type
input:hover {color:red;
background-color:white;
}

Un peu de javascript et ca marche
dans le css redéfinir le style comme suit:
a:hover input {color:red;
background-color:white;
cursor:pointer;
}

Dans le source Html encadrer vos champs input avec une balise href faisant appel à la l'opérateur javascrript Void() 
<a href="javascript:void(0)">
<input type="submit">
</a>

Smiley eek Et ca marche
Bonjour, très interessant cette astuce !
moi j'essaye de mettre un champs dans hover alors ça marche sur ff mais pas dans ie dès que je survole le champs ça disparait !
merci si vous pouvez me mettre sur le voie
Sujet clos
Aller à