28172 sujets

CSS et mise en forme, CSS3

bonjour,

j'utilise sur mon site le principe de menu déroulant suivant :
A cross-browser pull-up cascading validating menu

cependant, ce n'est pas pour créer des menus déroulants à proprement parler mais dans le but de faire apparaître au survol de la souris des divs cachés contenant entre-autres des champs de formulaire.

mon code dérivé est disponible ici (pour cet exemple, seul le html a été modifié par rapport à l'original de manière à faire apparaître un champ de formulaire en lieu et place d'un item de menu) :
Exemple

tout va très bien fonctionner si vous êtes sous Firefox, Safari ou IE7 : au survol de la souris, vous pourrez cliquer à l'intérieur du champ pour le renseigner.
sous IE6, mon "menu" déroulé disparait dès qu'on survole le champ.

mettre le champ en position relative et lui donner un z-index important ne résout rien.
mettre un background de fond au champ ne résout rien.

j'ai fait plusieurs tests à partir des balises <form>; des éléments comme un bouton ne poseront pas de problème.
c'est juste le champ texte qui refuse de fontionner.

avant, j'utilisais le JQuery suivant et ça fonctionnait :
Coda Bubble

quelqu'un a-t'il déjà rencontré ce type de problème et peut-il proposer une solution?
par avance merci Smiley cligne
Bonjour

Il n'est pas très raisonnable de conditionner l'accès à un formulaire sur un événement aussi instable. Si tu veux vraiment cacher ce formulaire, opte plutôt pour un display:none qu'un vrai click sur un lien affichera par JS, en prenant bien soin de déclarer "l'invisibilité" du formulaire par JS également, de façon à ce que, quand celui-ci est désactivé, le formulaire apparaisse bien à sa place dans la page.
justement, je souhaite éviter l'utilisation de JS (c'est pour ça que j'ai abandonné le JQuery).

je sais qu'ergonomiquement et accessiblement parlant, ce n'est pas l'idée du siècle de faire comme ça... n'empêche que j'aimerais bien trouver la solution en pur CSS . Smiley ohwell

si pas possible, existe t'il un mini-JS qui ferait en sorte que je ne perde pas le hover quand je passe sur les input de type "text"?

le problème est lié aux input de type "text" (et textareas). un input type "submit" avec value "ok" passe.
Modifié par css.addict (26 Mar 2008 - 17:57)
bon je me réponds à moi même puisque j'ai fini par trouver la solution; ça servira peut-être à d'autres!

il suffit de faire appel par le biais de css à un fichier htc se trouvant ici :
css hover


body{
	behavior:url("../js/csshover.htc");
}