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

Consultez la formation SEO spéciale Wordpress
par WebRankInfo / Ranking Metrics

stephanda
Nouveau WRInaute
Nouveau WRInaute
 
Messages: 17
Enregistré le: 9 Fév 2013

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

Message le Ven Déc 12, 2014 9:06

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

salva
WRInaute accro
WRInaute accro
 
Messages: 4559
Enregistré le: 16 Avr 2006

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

Message le Ven Déc 12, 2014 9:58

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

Ton navigateur est-il à jour ?

stephanda
Nouveau WRInaute
Nouveau WRInaute
 
Messages: 17
Enregistré le: 9 Fév 2013

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

Message le Ven Déc 12, 2014 10:06

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
WRInaute passionné
WRInaute passionné
 
Messages: 1692
Enregistré le: 9 Jan 2010

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

Message le Ven Déc 12, 2014 11:28

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

lambi521
WRInaute passionné
WRInaute passionné
 
Messages: 1549
Enregistré le: 15 Juin 2010

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

Message le Ven Déc 12, 2014 11:35

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

stephanda
Nouveau WRInaute
Nouveau WRInaute
 
Messages: 17
Enregistré le: 9 Fév 2013

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

Message le Ven Déc 12, 2014 11:39

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


MikeR
WRInaute passionné
WRInaute passionné
 
Messages: 1692
Enregistré le: 9 Jan 2010

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

Message le Ven Déc 12, 2014 11:44

Par contre, la "table" fonctionne bien.

stephanda
Nouveau WRInaute
Nouveau WRInaute
 
Messages: 17
Enregistré le: 9 Fév 2013

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

Message le Ven Déc 12, 2014 11:45

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

lambi521
WRInaute passionné
WRInaute passionné
 
Messages: 1549
Enregistré le: 15 Juin 2010

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

Message le Ven Déc 12, 2014 11:56

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: Tout sélectionner
<span class="testsd">blabla</span>


Code: Tout sélectionner
.testsd {
visibility:hidden;
}
.testsd:hover {
visibility:visible;
color:#009900;
font-weight:bold;
}

stephanda
Nouveau WRInaute
Nouveau WRInaute
 
Messages: 17
Enregistré le: 9 Fév 2013

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

Message le Ven Déc 12, 2014 12:01

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
WRInaute passionné
WRInaute passionné
 
Messages: 1549
Enregistré le: 15 Juin 2010

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

Message le Ven Déc 12, 2014 13:44

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
WRInaute discret
WRInaute discret
 
Messages: 104
Enregistré le: 25 Mar 2009

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

Message le Ven Déc 12, 2014 14:39

Bonjour Stephanda.

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

Code: Tout sélectionner
<!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
Nouveau WRInaute
Nouveau WRInaute
 
Messages: 17
Enregistré le: 9 Fév 2013

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

Message le Ven Déc 12, 2014 15:20

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
Nouveau WRInaute
Nouveau WRInaute
 
Messages: 17
Enregistré le: 9 Fév 2013

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

Message le Dim Déc 14, 2014 23:27

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


Formation recommandée sur ce thème :

Formation SEO spéciale Wordpress : apprenez à optimiser le référencement naturel d'un site fait avec Wordpress... Formation Ranking Metrics animée par un expert SEO / Wordpress.

Tous les détails sur le site Ranking Metrics : programme, prix, dates et lieux, inscription en ligne.

Lectures recommandées sur ce thème :