18041 sujets

Questions générales et questions de débutants

:hover sur iDevices

Bonjour, je suis actuellement en phase "beta" d'un site internet, et je viens de me rendre compte que sur les appareils tactiles (ipad et iphone en tout cas) les propriétés :hover en CSS ne sont pas reconnues, même pas au "tap" sur la partie concernée.

J'aimerais donc savoir comment je peut faire ?

Dans mon cas il s'agit du menu et d'un paneau latéral qui s'ouvre pour afficher de l'information. Voici un lien (provisoir) vers la beta

un petit coup de main ?
je pensait à faire une feuille de style pour iDevices et comme ça, le panneau reste toujours sorti, mais ça me fait "cacher" les photos donc si j'ai une meilleure solution Smiley ravi

Merci les amis !
Salut et bienvenue Smiley smile

Et bien il manque tout simplement les pseudo-classes :focus et :active dans la règle qui s'applique aux éléments survolés.
.menu ul a:hover, .menu ul a:focus, .menu ul a:active {
    color: #FFFFFF;
}

Modifié par audrasjb (23 Sep 2013 - 09:03)
Bonjour, (et merci pour la bienvenue Smiley biggrin )

J'ai ajouté ce que vous m'avez conseillé : 
.content-left:hover, .content-left:focus, .content-left:active {
left:0px;
}

Mais sur iphone (au moins, parce que je n'ai essayé qu'avec iphone) celà n'as pas d'impact sur mon problème Smiley confus
Le survol sur les écrans tactiles, je crois que tu vas devoir en faire ton deuil Smiley decu Au passage, puisque tu vas sûrement devoir imaginer une autre ergonomie pour ta navigation, je trouve, personnellement, que ton menu n'est pas très "affordant au clic", comme on dit. Que le mot "projet" ouvre un sous-menu, ça ne m'avait pas interpellé tout de suite... Bon courage !
petibato a écrit :
Le survol sur les écrans tactiles, je crois que tu vas devoir en faire ton deuil Smiley decu

Smiley decu je ne sais pas trop comment faire sans ça, puisque le but du site c'est d'en mètre "plein la vue" par l'image, ce serais domage de cacher de l'image en permanence, et dans l'autre sens (le menu apparait, et avec un bouton on le cache) c'est pas "affordant au clic" ^^

j'ai essayé cette méthode mais ça ne fonctionne pas chez moi :s

petibato a écrit :
Au passage, puisque tu vas sûrement devoir imaginer une autre ergonomie pour ta navigation, je trouve, personnellement, que ton menu n'est pas très "affordant au clic", comme on dit. Que le mot "projet" ouvre un sous-menu, ça ne m'avait pas interpellé tout de suite... Bon courage !

à bon ? Smiley rolleyes
ça c'est ballot... moi qui trouvait que 2 liens seulement sur le menu, ça induisait une simplicité enfantine ...
Modifié par bunny123 (23 Sep 2013 - 12:00)
Re,

Ah oui d'accord… bon il y a un gros souci alors : je n'avais absolument pas remarqué ce panneau (et je ne vois absolument pas ce qui pourrait suggérer au visiteur qu'il va se passer quelque chose lors du survol de cette zone Smiley sweatdrop
Ouaip, c'est absolument pas affordant pour le coup, donc il vaudrait mieux abandonner cette idée.

Je croyais que tu parlais des éléments du menu déroulant, donc oublie ma réponse ci-dessus.
Pour tout de même apporter une réponse à la question de base, il faudrait modifier les propriétés CSS du panneau lors du click, plutôt avec Javascript. Voilà un exemple rapidos avec la syntaxe de jQuery :
$('.content-left').click(function(){
   $(this).animate({ 'left' : '0' }, 'slow');
});

Modifié par audrasjb (23 Sep 2013 - 12:05)
audrasjb a écrit :
Re,

Ah oui d'accord… bon il y a un gros souci alors : je n'avais absolument pas remarqué ce panneau (et je ne vois absolument pas ce qui pourrait suggérer au visiteur qu'il va se passer quelque chose lors du survol de cette zone Smiley sweatdrop
[. . .]
Il faudrait modifier les propriétés CSS du panneau lors du click, plutôt avec Javascript. Voilà un exemple rapidos avec la syntaxe de jQuery :
$('.content-left').click(function(){
   $(this).animate({ 'left' : '0' }, 'slow');
});


Je vais voir à ajouter une flèche orienté vers la droite (pour montrer que quelque-chose va sortir ?)
par contre le script que tu as écrit, je l'ai intégré "tel quel" et je pense que ce n'était pas comme ça qu'il fallait faire :S
dans la partie <head> j'ai mis : 
<script type="text/javascript" src="js/jquery.easing.min.js"></script>
<script>$('.content-left').click(function(){
   $(this).animate({ 'left' : '0' }, 'slow');
});</script>


le js c'est pas trop mon truc, c'est pour ça que j'utilise supersizer qui est tout fait, et :hover en css...
il faut l'utiliser autrement le code ?
Modifié par bunny123 (23 Sep 2013 - 15:23)
Sujet clos
Aller à