28172 sujets

CSS et mise en forme, CSS3

Comportement du pointeur de la souris sur un li TEXT hover

Salut,

Je viens de m'apercevoir d'un soucis d'interprétation du comportement de la souris sous IE7, Firefox, Google Chrome, sous Windows, le seul navigateur qui se comporte correctement est OPERA. Testé sous Windows XP pro SP3, j'ai pas testé sous d'autres OS.

En gros, voici le code simplifié :

<ul>
<li>mon texte</li>
<li>mon texte</li>
<li>mon texte</li>
</ul>


Pour le CSS :

ul { margin:0; padding:0; list-style-type: none;}
li {color: #FF0; margin-top: 2px; margin-left: 20px; }
li:hover {color:#000; }


Le pointeur de la souris va changer au mode "input" au survole des li, sauf pour Opera, qui reste en mode "fleche".

Si ma logique est la bonne, Opera se comporte correctement, et les autres navigateurs, pas vraiment, puisqu'il y a pas de champs à remplir !

Si vous avez des idées pour corriger ça, je prends !

J'aimerais aussi savoir si ca fait pareil sous d'autres os/autres navigateurs.

Cordialement
La solution "bidouille" serait de repréciser le type de pointeur avec "cursor: Default".

Sinon pour les autres navigateurs, je suppose qu'ils associent le comportement hover à celui d'un lien (mais je ne fais que supposer).

Et pour répondre à ta dernière question : IE6 ne gère les pseudo classes (donc hover) que sur les éléments de liens (a).
Salut,

Merci pour le cursor, je vais tester, je ne connaissais pas, mais je me doutais qu'il y avait une telle fonction.

Ensuite, je te corriger, il n'associe pas à un lien mais un à champs type input, textarea, et c'est valable pour IE7, Firefox, Google Chrome, c'est pour ça que je trouve bizarre, pour les liens, normalement c'est "la main".

Pour IE6, j'ai totalement laissé tomber, c'est impossible de faire quoi que ce soit sans prise de tête !

Edit :
J'ai testé, et ça fonctionne bien, merci beaucoup.
Modifié par webjfr (04 Feb 2009 - 12:22)
Heu... c'est quoi le mode input?

Pour rappel, la plupart des navigateurs utilise le même pointeur pour le survol des textes sélectionnables et des champs texte (textarea et input de type "text"). C'est un comportement normal et il n'est pas conseillé de l'annuler de manière globale (pour tous les textes d'une page ou d'une zone), cela pourrait déconcerter certains utilisateurs. Smiley cligne
Salut,

Excuse moi, mais si tu mettais un p:hover sur l'affichage du message que je tape actuellement, la souris se comportera comme si tu l'avais positionné sur le textarea pour taper le message (sauf pour opera).
Pour moi, ce problème a bien plus de chance de déconcerter les utilisateurs.

Edit :

J'ai un peu chercher les options "cursor" possible, alors, un :hover sur un p ou un li va mettre le curseur comme en valeur "TEXT" au lieu de "default".
Je pense que c'est pas normal...
Modifié par webjfr (04 Feb 2009 - 19:04)
webjfr a écrit :
Excuse moi, mais si tu mettais un p:hover sur l'affichage du message que je tape actuellement, la souris se comportera comme si tu l'avais positionné sur le textarea pour taper le message (sauf pour opera).

Je t'excuse bien volontiers mais je crois que tu te fais du mouron pour rien, et que tu analyses mal le problème. Je pense que ça n'a strictement rien à voir avec l'utilisation de :hover, mais plutôt avec la valeur par défaut utilisée par chaque navigateur pour la propriété cursor sur tel ou tel élément.

Ça peut éventuellement varier selon les systèmes, mais sauf erreur de ma part:
- la plupart des éléments sont en cursor: text par défaut dans Firefox et Safari;
- la plupart des éléments sont en cursor: default dans Opera.

Que le curseur "default" (le pointeur normal de la souris) te semble plus logique au survol d'un texte que le pointeur "text" (en forme de I, qui indique à l'utilisateur que le texte survolé est sélectionnable), c'est une chose. Mais l'imposer alors que ce n'est pas le comportement normal du navigateur, ça me semble être une bêtise.

Une page de test qui va bien, sans :hover de quelque sorte que ce soit, à tester dans divers navigateurs en survolant les divers paragraphes.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Test</title>
	<style type="text/css" media="all">
	p {
		margin: 2em;
		font-size: 2em;
	}
	#test1 {
		cursor: default;
	}
	#test2 {
		cursor: text;
	}
	</style>
</head>
<body>

<p>Propriété <code>cursor</code> non utilisée<br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus.
Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed,
dolor.</p>

<p id="test1"><code>cursor: default;</code><br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus.
Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed,
dolor.</p>

<p id="test2"><code>cursor: text;</code><br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus.
Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed,
dolor.</p>

</body>
</html>

Mais j'ai peut-être loupé une information. Désolé si je réponds à côté. Smiley cligne
Ah !

Voila, tu as mal compris !

Tu as fait ton test, la le comportement est normal, je suis entièrement d'accord avec toi !

maintenant, ajoute un

p:hover { color:#0F0; }

Et passe le texte en survol, et tu auras compris le problème que je souligne !!!!
webjfr a écrit :
Je pense que c'est pas normal...

C'est parfaitement normal.

Tu utilises Opera au quotidien?

a écrit :
p:hover { color:#0F0; }

Et passe le texte en survol, et tu auras compris le problème que je souligne !!!!

La couleur change au survol, mais ça ne change strictement rien du côté du curseur (encore heureux). Smiley confuse
Modifié par Florent V. (04 Feb 2009 - 19:24)
Pour information, dans Firefox le type de curseur par défaut pour le texte est "text". Ce n'est pas dans les feuilles de styles par défaut du navigateur je pense (après vérification Smiley cligne ), mais géré au niveau du moteur vu que la reconnaissance de «est-ce qu'on est au-dessus de texte sélectionnable» dépasse le cadre des boites CSS.

Et, information complémentaire: le curseur par défaut pour les éléments INPUT de type text et TEXTAREA est également "text", et pour le coup c'est vérifiable dans ApplicationDir/res/forms.css (file:///Applications/Firefox.app/Contents/MacOS/res/forms.css dans mon cas).

Je veux bien voir en ligne une page qui pose problème, parce que là mes tests ne donnent aucun comportement étrange.
Modifié par Florent V. (04 Feb 2009 - 19:29)
Salut,

Je viens de t'envoyer un PM avec le lien test.

C'est ton exemple, à part que j'ai mis un p:hover (voir la source)

Donc, comme tu es sous MacOS apparament, sous windows, que ce soit les 3 navigateurs que j'ai cité, si tu passes ta souris sur le premier paragraphe, alors le texte devient vert, mais en plus, la souris passe en pointeur TEXT au lieu de "default".

Pis, ça se répercute aussi sur tous les autres texte même sans :hover !

Edit:
Bon, pour la répercution que je parle, c'est parce que j'ai un <input type="text"> avec un css input:hover, et ça provoque un cursor:text sur tout le div.

Sinon, j'ai testé avec un cursor:default sur le conteneur (donc sur toute la page) et j'ai glissé un textarea pour voir si le curseur réagi correctement, et la réponse est : oui.

J'aimerais bien savoir si toi, qui apparament est sous MacOs tu rencontres donc le problème sur le lien que je t'ai donné, si oui, alors Microsoft n'est pas en cause.
Modifié par webjfr (04 Feb 2009 - 20:10)
webjfr a écrit :
Je viens de t'envoyer un PM avec le lien test.

C'est ton exemple, à part que j'ai mis un p:hover (voir la source)

Oui, c'est ce que j'avais testé en local. J'ai testé à nouveau à la maison, sous Linux, et c'est bien sûr le même comportement (sauf que les curseurs sont ceux du système, donc ont un design différent... plus sympa pour le curseur "text", d'ailleurs).

webjfr a écrit :
la souris passe en pointeur TEXT au lieu de "default"

Euh... il faut le répéter combien de fois que c'est un comportement NORMAL?

Dans la majorité des navigateurs (Firefox, Safari, Chrome, et de mémoire Internet Explorer), le curseur se comporte ainsi:
- style "default" «par défaut», qui correspond normalement au pointeur standard du système d'exploitation, à priori un dessin de flèche dont la pointe est dirigée en haut à gauche;
- style "text" lors du survol de tout caractère de texte, sauf exceptions (c'est quand même logique non, le style "text" au survol du texte...);
- puis toute une série d'exceptions, comme notamment le style "text" au survol de certains éléments de formulaire, le style "default" au survol d'un élément LABEL et d'autres éléments de formulaire, le style "pointer" au survol des liens, etc.

Mon impression est la suivante: tu utilises régulièrement Opera et tu es habitué à ses styles par défaut pour le curseur. Effectivement, sur ce point Opera ne se comporte pas comme la plupart des autres navigateurs, vu qu'il utilise le style "default" même lors du survol des caractères de texte. Du coup, tu analyses le style "text" comme signifiant «saisie de caractères possibles» (tu parlais de input). Comme tu es surpris de constater ce comportement dans d'autres navigateurs, tu penses à un bug ou, au mieux, une incohérence, alors qu'il s'agit d'un comportement normal et d'un choix des développeurs de ces navigateurs.

Dis-moi où j'ai faux?

Une remarque: si tu reprends mon code de test, c'est à dire ta page de test moins le style au survol, tu constateras que le comportement du curseur est le même que le style au survol (celui qui change la couleur) soit présent ou non. Il n'a aucune influence. Du moins dans Firefox, je n'ai pas pris le temps de tester systématiquement avec les autres navigateurs mais je serais surpris qu'un changement de couleur apporte une différence dans le style de curseur...
Salut,

J'ai édité, tu as raison, je me suis trop habituée à Opera !

Je m'excuse pour cette petite prise de tête :-P

Mais... Je sais pas... Je devais être trop fatiguer hier, à force d'être réveiller toutes les heures pendant la nuit...
Modifié par webjfr (05 Feb 2009 - 10:49)
Sujet clos
Aller à