Différence entre Firefox,IE et Chrome : Hover ok pour les 2 premiers mais pas pour Chrome

stephanda · 12 Décembre 2014

Bonjour,

J'utilise Wordpress et ma configuration WP actuelle est 4.0.1, l'adresse du site est blog.elzeralde.fr

Sur la page http://blog.elzeralde.fr/exemples-numerique-autres-1/ lorsque l'on est sous IE et sous Firefox, au survol sous premier exercice le texte de la solution apparait (et c'est très bien). Lorsque l'on est sous Chrome rien n'apparait plus.

Ci-dessous le code CSS utilisé:
.testsd span {
visibility:hidden;
}
.testsd:hover span {
visibility:visible;
color:#009900;
font-weight:bold;
}

Ci-dessous le code PHP utilisé:
(-2) + 3*1+ 2*2 = 5 ; elle doit donc obtenir 10 + 15 = 15

Quelqu'un a-t-il une idée?
Merci pour votre aide, cordialement, Stephan

salva · 12 Décembre 2014

Depuis mon poste de travail, la page fonctionne sur Chrome de la même façon que Firefox.

Ton navigateur est-il à jour ?

stephanda · 12 Décembre 2014

Bonjour,
merci pour ton retour. Oui mon navigateur semble être à jour "Version 39.0.2171.95 m"
J'avoue que je suis perplexe. Tu regardes bien l'exercice sur Stéphanie qui veut à tout prix la moyenne en math?

MikeR · 12 Décembre 2014

J'ai le même comportement que toi sous Chrome.
Pourquoi passer par un double ?

lambi521 · 12 Décembre 2014

Problème de cache peut-être ?...

stephanda · 12 Décembre 2014

Bonjour:
à MikeR: si je ne mets pas le double , le texte de la solution devient visible sous Firefox au lieu d'être invisible... Et je ne sais pas pourquoi. Mais en tout cas avec le double cela marche bien.
à lambi521: comment vérifier cette histoire de cache? Cela dépasse très nettement mes compétences

MikeR · 12 Décembre 2014

Par contre, la "table" fonctionne bien.

stephanda · 12 Décembre 2014

à MikeR: oui j'avais vu que l'affichage des tableaux fonctionnaient bien

lambi521 · 12 Décembre 2014

Sous Chrome, fait Ctrl + Shift + Suppr en même temps sur ton clavier, et vide tout le cache

Sinon, garde un seul span comme ça :
Code:
blabla
Code:
.testsd {
visibility:hidden;
}
.testsd:hover {
visibility:visible;
color:#009900;
font-weight:bold;
}

stephanda · 12 Décembre 2014

bonjour lambi521,
j'ai fait ce que tu m'as dit sur Chrome. Cela ne change rien, le problème persiste.

Comme je l'expliquais à MikeR, si ne mets pas le span en double, la solution n'est plus cachée sous Firefox

lambi521 · 12 Décembre 2014

C'est du CSS de base pur et simple, tous les navigateurs affiche cela de la même manière

D'ailleurs chez moi ça s'affiche pareil sous Chrome aussi

Tu as viré le 2ème span dans le code du site ET dans le CSS ?

Supermaury · 12 Décembre 2014

Bonjour Stephanda.

Tu peux obtenir l'effet voulu en utilisant text-indent :

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" itemscope="itemscope" itemtype="http://schema.org/Article" lang="fr-FR">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<style type="text/css">
			.reponse {
				display:block;
				color:#009900;
				font-weight:bold;
				text-indent:-3000px
			}
			.reponse:hover {
				text-indent:0
			}
			.correct:hover {
				color:#009900;
				font-weight:bold;
			}
			.correct:hover::after {
				content: " (gagné !)"
			}
			ol {margin:0}
		</style>
	</head>
	<body>
		<p>
			Je suis la question mystère...
			<ol type="a">
				<li>choix 1</li>
				<li class="correct">choix 2</li>
				<li>choix 3</li>
			</ol>
			<div class="reponse">Je suis la réponse cachée...</div>
		</p>
		<p>
			Je suis la question mystère...
			<ol type="a">
				<li class="correct">choix 1</li>
				<li>choix 2</li>
				<li>choix 3</li>
			</ol>
			<div class="reponse">Je suis la réponse cachée...</div>
		</p>
	</body>
</html>

@++ !

stephanda · 12 Décembre 2014

Bonjour,
à Lambi521 : j'ai essayé de suivre ce que tu me dis mais la solution n'apparait plus du tout sur Firefox (que ce soit en survol ou non)
à Supermaury : je vais essayer, merci encore

stephanda · 14 Décembre 2014

Bonjour à tous,
finalement j'ai pu trouver la solution grâce à cet article: http://stackoverflow.com/questions/4929310/why-isnt-css-visibility-working
à Supermaury: comme cela a l'air de marcher, je vais en rester là. Il y aurait trop d'articles à modifier si je vouslais passer par ta solutions.
Merci encore à vous deux, cordialement, Stephan

Similar Threads - Différence Firefox Chrome	Forum	Date
Etudier le positionnement différence firefox et chrome	Débuter en référencement	13 Décembre 2011
Difference IE (internet explorer) et FF ( Firefox )	Développement d'un site Web ou d'une appli mobile	2 Novembre 2010
Google Analytics : différence d'audience avec l'export Excel	Google Analytics	25 Juin 2020
Google Analytics : Utilisateurs > différence entre Sommes Graphique /normale	Débuter en référencement	25 Mai 2020
Difference indexe	Problèmes de référencement spécifiques à vos sites	28 Février 2020
Référencement de vidéo Youtube ou Viméo : Google fait-il une différence ?	Débuter en référencement	28 Février 2020
WordPress Différences entre GG analytics clients et les clics.	Google Analytics	22 Janvier 2020
Différence entre SEO france et SEO international?	Référencement Google	20 Novembre 2019
Grosse différence d'impressions ordinateur vs mobile	Référencement Google	12 Novembre 2019
Quelle est la différence entre BlueHost et Hosteur ?	Administration d'un site Web	2 Mai 2019