Montrer et cacher une image sur tablette

Bonjour
Je viens de faire une petite page de test, avec comme objectif de mettre au point un mécanisme de montrer/cacher une image à partir de sa miniature:

    <div class="container">
        Ceci est le texte associé.
        <img class="thumbnail" src="..." alt="" />
        <img class="poster" src="..." alt=""  />
    </div>

    .container {background:yellow;color:blue;position:relative;width:50%;margin:30px auto;}
    .thumbnail{position:absolute;top:0;left:-30px;}
    .poster{position:absolute;top:-20px;left:-35px;display:none;max-width:200px;}
               /* poster est normalement invisible */
    .thumbnail:hover ~ .poster, .poster:hover {display:block;} 
                /* poster visible si on est au dessus de thumbnail ou au dessus de poster */

C'est à dire que "poster" s'affiche quand on passe la souris sur "thumbnail"; reste affiché tant qu'on laisse la souris sur "poster" et disparait quand la souris sort de "poster".

Jusque là, tout va bien, mais je voudrais aussi que ça marche sur une tablette, et là, pas de :hoover qui tienne!
J'ai donc ajouté des actions sur clic, avec le design suivant (testable uniquement sur tablette):
1) si on clique sur thumbnail, je change la classe de thumbnail en "thumbnail active"

this.className="thumbnail active"

2) si on clique sur poster, je remets la classe de thumbnail à "thumbnail"

this.previousSibling.className="thumbnail"

3) dans le CSS

.thumbnail:hover ~ .poster, .thumbnail.active ~ .poster, .poster:hover {display:block;}

La première action fonctionne, la seconde pas du tout, le poster reste visible, j'en déduis que

this.previousSibling.className="thumbnail"

ne fonctionne pas.
Comme je n'ai pas trouvé de moyen de debugger sur la tablette, difficile de mettre ça au point.
Quelqu'un aurait il une idée?
Le fichier de test est à l'adresse http://alma-musica.net/tests/poster.html

Merci de votre aide
Modifié par PapyJP (03 Jun 2015 - 10:09)

J'ai progressé d'un cran: previousSibling n'est pas "celle que je croyais" mais le nœud de texte.
Difficile, je pense, de savoir exactement qui est "previous" et "next" dans une fratrie de nœuds, ça n'est sans doute utilisable que pour parcourir les nœuds et les traiter individuellement.

La solution c'est

this.parentNode.querySelector('.thumbnail').className = 'thumbnail';

Comme quoi, une fois de plus, quand on explique un problème on a fait un pas décisif vers las solution...
Edit: sauf que ça ne marche pas sur ma tablette, alors que ça marche sur mon PC en ayant enlevé les directives :hover du CSS....
Modifié par PapyJP (03 Jun 2015 - 10:40)

Hmmm! bizarre!
Si j'écris

            /*.thumbnail:hover ~ .poster,
            .poster:hover,*/
            .thumbnail.active ~ .poster {display:block;}

c'est à dire si je supprime les directives :hover, ça marche sur iPad
Par contre si je laisse les directives :hover, ça ne marche pas.
Cela doit vouloir dire qu'il y a un reste de support de :hover dans Safari sur iOS??

Que faire pour avoir un code CSS qui fonctionne sur les deux types de plateforme?