Tablette et :hover

Bonjour à tous

Je reviens sur mon message http://forum.alsacreations.com/topic-1-75973-1-Montreretcacheruneimagesurtablette.html qui n'a pas reçu de réponse.à la dernière question

Pour résumer:
1) dans une div, j'ai une image réduite (class="thumbnail") et une image plus grande (class="poster")
2) le poster ne doit s'afficher que si la souris passe dessus, ce qui est réalisé en CSS par

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

3) comme cela ne marche pas sur tablette, j'ai ajouté les actions suivantes en JavaScript:
a) si on clique sur le thumbnail, sa classe devient "thumbnail active" et le poster est rendu visible par CSS

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

b) si on clique sur le poster, la classe du thumbnail est remise à "thumbnail"
Le résultat: ça marche très bien sur PC, mais sur tablette le poster reste visible quand on clique dessus.

Si je supprime le CSS :hover, ça marche sut tablette, mais bien entendu l'apparition du poster au passage de souris ne se produit plus. Noter que s'il semble "normal" de cliquer sur un tablette pour voir quelque chose, cela n'est pas intuitif quand on dispose d'une souris.

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

mais j'aimerais trouver une solution qui permette d'afficher les posters au passage de souris sur les utilisateurs qui en ont une.

Vous pouvez voir les choses en action sur http://www.alma-musica.net/html/concerts.php

Merci de votre aide
Modifié par PapyJP (04 Jun 2015 - 11:27)

Bonjour,
Je ne vais pas répondre tout à fait à la question mais je vais essayer de vous aider :
Le hover sur PC n'est pas très agréable, si c'était moi, je referais le HTML et le CSS pour mettre plus en avant les visuels en les augmentant de taille.
Le but serait que l'internaute clique seulement sur ceux qu'il veux voir plutôt que de tous les survoler.
Si la taille de l'image est plus grande, il faudra donc revoir la mise en page du texte :
Par exemple mettre la date et l'heure, puis, en dessous, le nom du l’événement, puis, en dessous, le lieu.
A gauche de tout ce bloc, il y aurait donc l'image.
Répéter ça pour mettre 2 ou 3 événement par ligne.

Du coup, l'utilisateur devrait avoir envie de cliquer sur l'image, même avec la souris. Si besoin, une icone "plus" pourrait être ajouté sur les images ou, plus simplement, un petit texte en haut de la page qui explique qu'un clique agrandit l'image.

Merci Julien, mais je n'ai pas l'intention de modifier profondément le look du site d'une association (25 utilisateurs réguliers et quelques centaines de visiteurs tout au plus) pour une fonction marginale qui marchait très bien sur PC mais sème le souk sur tablette. Comme les tablettes deviennent de fait le moyen principal de consultation des sites, il est indispensable de les supporter correctement.

En fait ce qui m'intéresse c'est de comprendre pourquoi ce f@&#%**! bazar ne fonctionne pas. Ce doit être un problème de l'ordre dans lequel les événements sont déclenchés, mais je n'arrive pas à trouver d'infos.

Il me semble plus approprié de faire quelque chose de propre en CSS plutôt que de faire un bidouille en JS qui ne rendra pas forcément le contenu plus lisible mais bon effectivement, tout est une question de temps.
Bon courage

Bonjour,

Il est assez difficile (selon moi en tout cas) de mélanger hover et javascript. L'une des raisons majeures est que dans un soucis de bien faire, les mobiles vérifient si les objets ont des pseudo-classes hover dans le css lors d'un "tap" (click?) de l'utilisateur, et exécutent l'effet comme si l'utilisateur avait une souris et avait survolé l'objet. Et quand on re-"tap" sur l'objet, les mobiles ne font malheureusement pas disparaitre l'effet hover (ils ont probablement de bonnes raisons pour le faire aussi). Et faire le code javascript pour gérer ça ne me semble pas simple du tout.

Mais pour une page pas trop compliquée comme celle donnée en exemple pour la question initiale, il existe une méthode (parmi d'autres) remarquablement simple pour s'en sortir : on fait zéro code javascript, et on modifie la balise <body> (ou tout autre balise assez grande dans la page) en la remplaçant par :

<body ontouchstart="">

Ceci a pour effet de permettre à un utilisateur de mobile de faire disparaitre l'effet hover en cliquant n'importe où ailleurs que sur l'objet.

EDIT : un exemple simple complet

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<style>
.image {height:3em;width:5em;background:#ac4;}
.image:hover {height:6em;width:10em;}
</style>
</head>
<body ontouchstart="">
<div class="image" ontouchstart=""></div>
<p>Si vous avez une souris, survolez le rectangle vert. Le rectangle grossit. 
Pour ramener le rectangle à sa taille initiale, déplacez la souris en dehors du rectangle.</p>
<p>Si vous avez un écran tactile, cliquez sur le rectangle vert. Le rectangle grossit. 
Pour ramener le rectangle à sa taille initiale, cliquez en dehors du rectangle.</p>
</body>
</html>

Amicalement,
Modifié par parsimonhi (06 Dec 2015 - 22:27)

@parsimonhi
Merci de cette remarque, je n'avais pas pensé à mettre un événement d'annulation sur le body.
Une question "ontouchstart" ou "ontouchend"?

"ontouchstart" d'après la littérature !

Amicalement,

parsimonhi a écrit :
"ontouchstart" d'après la littérature !

Amicalement,

OK
Je suis sur d'autres problèmes en ce moment, je reviendrai à celui ci quand j'en serai sorti, ce qui n'a pas beaucoup de chances d'être avant la fin de l'année...