Faire suivre un ":active" d'un ":hover", est ce p

Bonjour,
Un problème ce pose à moi aujourd'hui, d'abord le code :

.photo_horizontale{
height: 110px;
width: 150px;
margin: 30px 10px 10px 10px;
display:block;
overflow:hidden;
border:0px solid rgba(0,0,0,0.7);
}

.photo_horizontale:hover{
position:absolute;
width:450px;
height:330px;
margin-top:-30px;
margin-left:-30px;
z-index:100;
border:6px solid rgba(0,0,0,0.7);
-webkit-transition-property:margin-top, margin-left, border, width,height,z-index;
-webkit-transition-duration:0.7s;
-o-transition-property:width,margin-top, margin-left, border, width,height,z-index;
-o-transition-duration:0.7s;
}

Comme vous pouvez le lire, au survol d'une image de classe photo_horizontale, sa taille est multiplier par 3 avec un effet de transition de 0.7s. Mon problème est que à chaque survol d'image, l'effet s'active. Moi je cherche à ce que l'utilisateur déclenche l'évènement par un clique sur la photo en question (:active sur la classe). Le problème étant que le :active gère l'évènement tant que le clique est maintenu. Je voudrai pouvoir combiner un effet :hover juste après le clique (:active) de façon a ce que l'image reste en taille *3 même si l'utilisateur lâche le clique. C'est compliquer à comprendre, j'espère que vous m'avez suivi ! Merci d'avance pour vôtre aide.

Bonjour,

C'est très simple: tu pousses les pseudo-classes d'état CSS dans leur retranchement en leur faisant faire des choses pour lesquelles elles ne sont pas prévues. Et du coup tu galères.

Solution: faire du JavaScript.
1. Au "click": ajout d'une classe sur l'élément.
2. Au "blur" (ou autre évènement plus pertinent): retirer cette classe.
Bien entendu les effets de transition et les styles à appliquer peuvent rester en CSS. C'est la logique de l'interaction (à quel moment ou sur quelle action on applique tel ou tel état) qui sera faite en JS.

PS: pour un exemple de cette logique de séparation de JS et CSS, on peut explorer cet exemple (entre autres): http://fvsch.com/code/transition-fade/test1.html
Modifié par fvsch (24 Nov 2011 - 22:16)