Astuce Input Hover sous IE opérateur Void() - Forum Alsacréations : CSS et Standards Web

Auteur
jeanlouis238	# 06 Apr 2006 - 16:20:47
5 Posts	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> Et ca marche Modifié par jeanlouis238 (06 Apr 2006 - 16:22)
5 Posts
QuentinC	# 06 Apr 2006 - 21:42:40
Étudiant qui bosse ... ou pas 4187 Posts	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). java.lang.BrainNotFoundException : Neuron connection failure
Étudiant qui bosse ... ou pas 4187 Posts
jeanlouis238	# 13 Apr 2006 - 17:14:30
5 Posts	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é.
5 Posts
Skyzoboy	# 04 May 2006 - 23:22:30
1 Posts	Je cherchais une solution à ce problème, je suis directement tombé sur ce topic. Merci pour cette solution ! Qui, de plus, est rapide à mettre en place ! 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). Modifié par Skyzoboy (04 May 2006 - 23:22)
1 Posts
chmel	# 05 May 2006 - 11:37:58
654 Posts	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)
654 Posts
marquito	# 22 May 2006 - 13:42:37
69 Posts	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> Et ca marche
69 Posts
marquito	# 22 May 2006 - 13:46:36
69 Posts	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
69 Posts
Prévenir un modérateur

Les références web : openweb.eu.org - opquast.com - webmaster-hub.com - webrankinfo.com - salemioche.net - web-pour-tous.org - webonorme.org

Nos partenaires : Editions Eyrolles - Location vacances France - Location vacances Europe

Nikozen : Hébergement - Réalisation : Alsacreations.fr