Problème avec un: style actif et le positionnement absolu

Question

OK, j'ai ajouté un style universel à mon main.css qui dit:

a:active { 
    top:1px; 
    position:relative; 
} 

Cela me donne un joli petit effet « coup de pouce » quand quelque chose est cliqué. Par conséquent, je devais contourner tous mes éléments <a> positionnés de façon absolue et les corriger de sauter jusqu'à top:1px et leur donner manuellement le bon coup de pouce.

Bien que je sois tombé sur un cas qui m'a jeté pour une boucle sur quelques niveaux. Je pense que j'ai obtenu le positionnement tous triés, mais ce qui se passe lorsque je clique sur l'ancre est que l'élément <span> qui vient ensuite dans le contenant <li> disparaît pendant que l'ancre est cliquée.

J'ai essayé de mettre le <span> à float:left mais au lieu de disparaître il a juste commencé à s'aligner à côté de l'ancre et à pendre à l'extérieur du conteneur <li>.

est ici la page: http://beta.helpcurenow.org/media/videos/

Ce que je fais référence à cette page sont les vignettes qui sont assis en dessous de la fenêtre vidéo principale. Il existe des flux de vignettes de vimeo avec une capture d'écran vidéo et les méta-données. La capture d'écran vidéo a une durée masquée dans l'ancre de sorte que lorsque vous passez la souris sur la vignette, elle apparaît. C'est ce qui provoque la disparition des métadonnées quand on clique dessus.

Et si vous souhaitez simplement voir le balisage ici, il est ci-dessous:

<ul id="video-gallery"> 
    <li> 
    <a class="video-thumbnail" href="#"> 
     <img src="http://ats.vimeo.com/775/137/77513796_200.jpg" alt="Amy Fann Interview"/> 
     <span class="play-arrow"></span> 
    </a> 
    <span class="video-metadata" id="video-13466402"> 
     <span class="video-title"><a href="#">Amy Fann Interview</a></span> 
     <span class="video-likes meta">Likes <span class="value">0</span></span> 
     <span class="video-views meta">Views <span class="value">2</span></span> 
     <span class="video-duration meta">Duration <span class="value">01:48</span></span> 
     <span class="video-post-date meta">Posted 1 day and 7 hours ago</span> 
     <span class="video-url hidden-data">http://vimeo.com/13466402</span> 
     <span class="video-description hidden-data">Amy Fann talks about her upcoming trip to Zambia as part of a CURE GO Team.</span> 
    </span> 
    </li> 
</ul> 

Et le CSS ... (évidemment il y a plusieurs autres règles de style pour cette section, mais je suis va essayer d'inclure uniquement ceux qui sont pertinents)

li a.video-thumbnail span.play-arrow { 
    display:none; 
} 
li:hover a.video-thumbnail span.play-arrow { 
    display:block; 
    width:122px; 
    height:86px; 
    background:url(/img/media/play-arrow.png) no-repeat center top; 
    position:absolute; 
    top:40px; 
    left:50px; 
} 
li:hover a.video-thumbnail:active span.play-arrow { 
    position:absolute; 
    top:30px; 
    left:40px 
} 
li a.video-thumbnail:active { 
    position:absolute; 
    top:auto; 
} 
li.added-video { 
    display: none; 
} 

Answer 1

Ce CSS devrait résoudre votre problème (au moins il l'a fait pour moi dans firebug):

li a.video-thumbnail:active { 
    position: static; 
} 

li:hover a.video-thumbnail:active span.play-arrow { 
    top: 40px; 
    left: 50px; 
} 

Je ne sais pas exactement pourquoi votre méta était caché sur :active, mais ce qui précède empêche le changement de type de position du lien de vignette et maintient tout en place.