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

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par stephanda, 12 Décembre 2014.

  1. stephanda
    stephanda Nouveau WRInaute
    Inscrit:
    9 Février 2013
    Messages:
    13
    J'aime reçus:
    0
    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é:
    <span class="testsd"><span>(-2) + 3*1+ 2*2 = 5 ; elle doit donc obtenir 10 + 15 = 15</span></span>

    Quelqu'un a-t-il une idée?
    Merci pour votre aide, cordialement, Stephan
     
    #1 stephanda, 12 Décembre 2014
  2. salva
    salva WRInaute accro
    Inscrit:
    16 Avril 2006
    Messages:
    3 425
    J'aime reçus:
    0
    Depuis mon poste de travail, la page fonctionne sur Chrome de la même façon que Firefox.

    Ton navigateur est-il à jour ?
     
    #2 salva, 12 Décembre 2014
  3. stephanda
    stephanda Nouveau WRInaute
    Inscrit:
    9 Février 2013
    Messages:
    13
    J'aime reçus:
    0
    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?
     
    #3 stephanda, 12 Décembre 2014
  4. MikeR
    MikeR WRInaute passionné
    Inscrit:
    9 Janvier 2010
    Messages:
    1 401
    J'aime reçus:
    0
    J'ai le même comportement que toi sous Chrome.
    Pourquoi passer par un double <span>?
     
    #4 MikeR, 12 Décembre 2014
  5. lambi521
    lambi521 WRInaute passionné
    Inscrit:
    15 Juin 2010
    Messages:
    1 463
    J'aime reçus:
    0
    Problème de cache peut-être ?...
     
    #5 lambi521, 12 Décembre 2014
  6. stephanda
    stephanda Nouveau WRInaute
    Inscrit:
    9 Février 2013
    Messages:
    13
    J'aime reçus:
    0
    Bonjour:
    à MikeR: si je ne mets pas le double <span>, 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 <span> cela marche bien.
    à lambi521: comment vérifier cette histoire de cache? Cela dépasse très nettement mes compétences
     
    #6 stephanda, 12 Décembre 2014
  7. MikeR
    MikeR WRInaute passionné
    Inscrit:
    9 Janvier 2010
    Messages:
    1 401
    J'aime reçus:
    0
    Par contre, la "table" fonctionne bien.
     
    #7 MikeR, 12 Décembre 2014
  8. stephanda
    stephanda Nouveau WRInaute
    Inscrit:
    9 Février 2013
    Messages:
    13
    J'aime reçus:
    0
    à MikeR: oui j'avais vu que l'affichage des tableaux fonctionnaient bien
     
    #8 stephanda, 12 Décembre 2014
  9. lambi521
    lambi521 WRInaute passionné
    Inscrit:
    15 Juin 2010
    Messages:
    1 463
    J'aime reçus:
    0
    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:
    <span class="testsd">blabla</span>
    Code:
    .testsd {
visibility:hidden;
}
.testsd:hover {
visibility:visible;
color:#009900;
font-weight:bold;
}
     
    #9 lambi521, 12 Décembre 2014
  10. stephanda
    stephanda Nouveau WRInaute
    Inscrit:
    9 Février 2013
    Messages:
    13
    J'aime reçus:
    0
    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
     
    #10 stephanda, 12 Décembre 2014
  11. lambi521
    lambi521 WRInaute passionné
    Inscrit:
    15 Juin 2010
    Messages:
    1 463
    J'aime reçus:
    0
    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 ?
     
    #11 lambi521, 12 Décembre 2014
  12. Supermaury
    Supermaury WRInaute discret
    Inscrit:
    25 Mars 2009
    Messages:
    144
    J'aime reçus:
    5
    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>
    @++ !
     
    #12 Supermaury, 12 Décembre 2014
  13. stephanda
    stephanda Nouveau WRInaute
    Inscrit:
    9 Février 2013
    Messages:
    13
    J'aime reçus:
    0
    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
     
    #13 stephanda, 12 Décembre 2014
  14. stephanda
    stephanda Nouveau WRInaute
    Inscrit:
    9 Février 2013
    Messages:
    13
    J'aime reçus:
    0
    #14 stephanda, 14 Décembre 2014
(Vous devez vous identifier ou vous inscrire pour poster ici.)
Chargement...
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
Menu, différence entre IE et Firefox Développement d'un site Web ou d'une appli mobile 1 Septembre 2009
Ligne hr différence entre Firefox et IE8 Développement d'un site Web ou d'une appli mobile 19 Mai 2009
différences d'affichage entre IE et Firefox Développement d'un site Web ou d'une appli mobile 3 Janvier 2009
difference de positionement des annonces sur IE et firefox AdWords 30 Novembre 2007
Boouton de recherche google différence entre IE et Firefox Développement d'un site Web ou d'une appli mobile 27 Juin 2007
Probleme affichage (différence entre IE et Firefox) Développement d'un site Web ou d'une appli mobile 6 Juin 2007
[CSS] Différence IE7 / FireFox Développement d'un site Web ou d'une appli mobile 22 Mai 2007
CSS : differences entre IE et Mozilla/Firefox Développement d'un site Web ou d'une appli mobile 20 Avril 2006
Différence de résultats Firefox/IE pendant quelques minutes Crawl et indexation Google, sitemaps 9 Mars 2005
Différence de référencement streameur, streamer Référencement Google 7 Mars 2022
différence dans l'URL vs SEO ? Référencement Google 2 Mars 2022
différence de texte entre version ordi et mobile Rédaction web et référencement 17 Septembre 2021
Différence entre contenu dupliqué et plagié ? Débuter en référencement 27 Avril 2021
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