Iphone : réaction des boutons au survol (clic)

Bonjour,

Avant tout je teste avec un iphone 4, mon problème est le suivant :

Je dois créer un effet de survol sur un bouton. Sur l'iphone, bien sûr le hover n'existe pas mais le fait de laisser le doit dessus doit avoir un effet quelconque non ?

Avec ce code css, sur un navigateur PC ça fonctionne, le spriteest pris en compte mais, sur l'iphone, il n'y a aucun effet :

a { 
display: block; 
width: 80%; 
color: #FFF; 
background: url(../images/bck-btn.png) repeat-x 0 0; 
border:1px #FFF solid;
 border-radius: 4px; 
box-shadow:0 4px 4px #999; }

a:hover { 
color: #8c8784; 
background: url(../images/bck-btn.png) repeat-x 0 bottom; 
outline: 0; 
border:1px solid #c8c8c8; 
}

Avez-vous une idée ? Ou je pars dans une mauvaise direction... ?

Merci d'avance ^^
Modifié par cevichero (26 Nov 2012 - 17:08)

Salut,

Tu peux laisser la règle CSS faisant appel à la pseudo-classe :hover (que tu peux, d'ailleurs, doubler d'une règle faisant appel à la pseudo-classe :focus). Généralement, sur les écrans tactiles comme l'iPhone ou l'iPad, l'effet au survol d'un lien se déclenche à l'activation de ce dernier.

Victor BRITO a écrit :
Salut,

Tu peux laisser la règle CSS faisant appel à la pseudo-classe :hover (que tu peux, d'ailleurs, doubler d'une règle faisant appel à la pseudo-classe :focus). Généralement, sur les écrans tactiles comme l'iPhone ou l'iPad, l'effet au survol d'un lien se déclenche à l'activation de ce dernier.

Merci pour ta réponse Victor,

Malheureusement ça ne change rien, au "poser du doigt" sur le bouton une espèce de cadre gris transparent vient de caler sur le bouton sans pour autant que le background du lien ne change...

Voici à nouveau mon code :

section.iphone-redirect section ul li a.btnBlue { 
background: url(../images/bck-btn.png) repeat-x 0 top; /*.svg*/ 
border:1px #FFF solid; 
}
section.iphone-redirect section ul li a.btnBlue:hover,
section.iphone-redirect section ul li a.btnBlue:active,
section.iphone-redirect section ul li a.btnBlue:focus { 
color:#8c8784; 
background:url(../images/bck-btn.png) repeat-x 0 bottom; 
outline: 0; 
border:1px solid #c8c8c8; 
}

Ai-je oublié quelque chose ?

Essaie avec la pseudo classe :active, mais pas sûr que ça marche.. J'ai pas de device pour tester ça..